JQ 循环切换DIV

 PS:功能点击切换下一个DIV,实现了循环切换!!!

Jquery代码:

<script type="text/javascript">

$(document).ready(function(){

var total = $(".like_list>div").length;

//没用的

$("a.switch_link").bind("click",function(e){

 

var nindex = $(".like_list div").index($(".like_list div:visible").next("div"));

//.like_list  div  就是选择所有需要切换用的div

//前面的是当前可见的div  即display:block的那个   

//next 就是下一个

//然后计算一下next的索引  

if(nindex == -1){

$("div.like_list div:visible").toggle();

$(".like_list div").eq(0).toggle();

//当等于-1的时候  说明当前显示的是最后一个。。。

//就进入if块了   那么当前的隐藏   第1个显示


}else{

$("div.like_list div:visible").toggle().next("div").toggle();

//否则当前的隐藏 下一个显示出来


}

})

})


</script>

 

HTML代码:
<body>
<a href="void(0)" class="switch_link">换一批</a>
<div class="like_list">
<div class="like-tab1" style="height:100px;">
    这里是1
    </div>
    <div class="like-tab2" style="height:100px; display:none;">
    这里是2
    </div>
    <div class="like-tab3" style="display:none;height:100px;">
    这里是3
    </div>

</div>
</body>
相关文章
相关标签/搜索