使用jQuery淡入网页 [英] fade in webpage with jQuery

问题描述

我要做什么:

#leftSide          #rightSide (display:none)
 _______________ _______________________________________________
|               |                                               |
| category      |                                               |
|  -link        |                                               |
|  -link        |                                               |
|               |                                               |
| category      |                                               |
|  -link        |                                               |
|  -link        |                                               |
|               |              content                          |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|               |                                               |
|_______________|_______________________________________________|

每次我单击类别中的链接时，我都希望使用该链接的内容淡入#rightSide.

Every time I click on a link in a category, I want to fade in #rightSide with the content of that link.

我知道如何在onclick中淡化它，但是我不知道每次不刷新页面就如何加载新内容.

I know how to fade it in onclick, but I don't know how to load new content every time without the page refreshing.

任何帮助都值得赞赏，不一定要致电.有人在不刷新页面的情况下加载内容吗?任何指针表示赞赏.

Any help appreciated, not necessarily called. Does anyone what this is called, loading content without page refreshing? Any pointers appreciated.

推荐答案

任何人都可以做到这一点，无需页面即可加载内容 刷新?

Does anyone what this is called, loading content without page refreshing?

这是 Ajax .

对于您的问题，将rel属性分配给左侧栏中的链接:

As for your problem, assign rel attribute to your links that you have on left sidebar:

<a href="#" rel="div_1">Link 1</a>
<a href="#" rel="div_2">Link 2</a>
<a href="#" rel="div_3">Link 3</a>

然后为每个与rel属性具有相同值的链接分配id到div元素(假定位于您的内容区域之内):

Then assign id to div elements (which are assumed to be inside your content area) for each links with same value as their rel attribute:

<div id="div_1">Div 1</a>
<div id="div_2">Div 2</a>
<div id="div_3">Div 3</a>

现在使用jQuery，您只需要这样做:

Now with jQuery, you simply need to do:

$('a[rel^=div]').click(function(){
  $('#' + this.rel).fadeIn();
});

这样，当单击链接时，jQuery将读取其值并在您的内容区域显示相应的div元素.

This way when a link is clicked, jQuery will read its value and will show corresponding div element in your content area.

这篇关于使用jQuery淡入网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！