我正在寻找一个可以一次显示一个DIV并隐藏其余部分(在我的示例中为2个)的脚本,另外我希望用户来回导航
即
用户单击后,将显示DIV 1,依此类推,直到DIV3
他还应该能够从DIV2-DIV1遍历等等
我确实发现这种发展很有趣
http://jsfiddle.net/meetrk85/Y7mfF/
预先感谢十亿…..
解决方法:
鉴于以下HTML:
<div class="sample">div1</div>
<div class="sample">div2</div>
<div class="sample">div3</div>
<a href="#" id="display" class="display">next</a>
<a href="#" id="display1" class="display">prev</a>
以下jQuery似乎可以满足您的要求:
// selects all the divs of class='sample',hides them, finds the first, and shows it
$('div.sample').hide().first().show();
// binds a click event-handler to a elements whose class='display'
$('a.display').on('click', function(e) {
// prevents the default action of the link
e.preventDefault();
// assigns the currently visible div.sample element to a variable
var that = $('div.sample:visible'),
// assigns the text of the clicked-link to a variable for comparison purposes
t = $(this).text();
// checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one
if (t == 'next' && that.next('div.sample').length > 0) {
// hides all the div.sample elements
$('div.sample').hide();
// shows the 'next'
that.next('div.sample').show()
}
// exactly the same as above, but checking that it's the 'prev' link
// and that there's a div 'before' the currently-shown element.
else if (t == 'prev' && that.prev('div.sample').length > 0) {
$('div.sample').hide();
that.hide().prev('div.sample').show()
}
});
参考文献:
> first()
.
> hide()
.
> next()
.
> on()
.
> prev()
.
> show()
.
> text()
.
> :visible
selector.
附加物:
我为何更改html in the linked demo的简要说明:
<div name="sample">div1</div>
<div name="sample">div2</div>
<div name="sample">div3</div>
<a href="#" id="display" value="display">next</div>
<a href="#" id="display1" value="display">prev</div>
> div中的name属性没有任何作用.如果所有元素都共享相同的名称,当然不是(它们不是输入元素,它们通过a链接到,因此请使用类名).
> value属性没有association with an a
element,据我所知,没有任何作用.为此,在上面的脚本中,我再次选择使用类名,因为共享了属性的相同“值”,尽管可以使用data- *属性,并且该属性是有效的.
>结束< / div>标签没有关闭任何内容,因此将它们更改为< / a>.