思路:
通过 hide() 隐藏和 show() 显示。
点击当前页中的下一页按钮,先获取这一页的index索引。
获取索引,除了下一页所有页面隐藏。
HTML:
<div class="items-top">
<div class="top">
<i class="iconfont icon-fanhui"></i>
<i class="iconfont icon-gengduo"></i>
<div class="inner" >
<p>你好</p>
</div>
</div>
<div class="top">
<i class="iconfont icon-fanhui"></i>
<i class="iconfont icon-gengduo"></i>
<div class="inner" >
<p>HELLO</p>
</div>
</div>
</div>
JQ:
var top = $(".top");
top.hide();
$(".items-top .top").eq(0).show();
//下一 页
$(".icon-gengduo").click(function () {
var num = $(this).parent().index() + 1;
top.hide();
$(".items-top .top").eq(num).show();
if (num == top.length) {
$(".items-top .top").eq(0).show();
}
});
//上一页
$(".icon-fanhui").click(function () {
var num = $(this).parent().index() - 1;
top.hide();
console.log(num);
$(".items-top .top").eq(num).show();
});
更多推荐
JQ-页面的上一页下一页切换
发布评论