例如,我有 10 个<div>
,我想<div>
在单击下一个按钮时显示每个按钮,并在单击前一个按钮时显示<div>
上一个按钮。如何使用 jQuery 做到这一点?
4 回答
<div class="divs">
<div class="cls1">1</div>
<div class="cls2">2</div>
<div class="cls3">3</div>
<div class="cls4">4</div>
<div class="cls5">5</div>
<div class="cls6">6</div>
<div class="cls7">7</div>
</div>
<a id="next">next</a>
<a id="prev">prev</a>
这是一个非常简单的 HTML 示例。
使用这样一个简单的 jQuery 代码:
$(document).ready(function(){
$(".divs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").next().show().prev().hide();
else {
$(".divs div:visible").hide();
$(".divs div:first").show();
}
return false;
});
$("#prev").click(function(){
if ($(".divs div:visible").prev().length != 0)
$(".divs div:visible").prev().show().next().hide();
else {
$(".divs div:visible").hide();
$(".divs div:last").show();
}
return false;
});
});
进一步解释:第一个块将隐藏除第一个之外的每个 div(e 是 jQuery 的每个函数中的计数器)。
另外两个块处理按钮的点击。我们正在寻找可见的 div 并在单击时显示下一个(参见 jquery 的 next() 函数或上一个 div(jquery 的 prev() 函数)。
如果没有下一个 div(单击下一个按钮),我们将隐藏可见 div 并显示第一个。
在线示例:http: //jsfiddle.net/hsJbu/
你可以这样做:
HTML:
<div class="mydivs">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
</div>
<button name="prev">go to previous div</button>
<button name="next">go to next div</button>
JS:
$(document).ready(function() {
var divs = $('.mydivs>div');
var now = 0; // currently shown div
divs.hide().first().show(); // hide all divs except first
$("button[name=next]").click(function() {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
divs.eq(now).show(); // show next
});
$("button[name=prev]").click(function() {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
divs.eq(now).show(); // show previous
});
});
听起来像你想要的旋转木马
以下是一些示例:http ://www.tripwiremagazine.com/2012/12/jquery-carousel.html
您可以有一个下一个和上一个按钮来滑入一个 div 和旧的滑出(或任何其他效果)
轮播不依赖于图像,它可以是充满内容的 Div。
编辑:引导自己的轮播:http: //twitter.github.io/bootstrap/javascript.html#carousel
如果你想自己做,试试下面的东西。最初将所有 div 设置为 display:none,除了第一个。同样在下面的代码中,根据您拥有的 div 数量更改 maxdiv 值(或者如果数字可以更改,则在 jquery 本身中找到它)。
$(document).ready(function(){
var tracker = 1;
var maxdivs = 4;
$("#next").click(function(){
var divclass = ".cls" + tracker;
$(divclass).css("display","none");
tracker = tracker + 1;
if(tracker > maxdivs)
tracker = 1;
divclass = ".cls" + tracker;
$(divclass).css("display","block");
});
$("#prev").click(function(){
var divclass = ".cls" + tracker;
$(divclass).css("display","none");
tracker = tracker - 1;
if(tracker < 1)
tracker = maxdivs;
divclass = ".cls" + tracker;
$(divclass).css("display","block");
});
});