image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
nav li {
float: left;
list-style: none;
width: 40px;
cursor: pointer;
height: 40px;
background-color: brown;
margin-left: 20px;
text-align: center;
line-height: 40px;
}
.zk3 ul {
display: none;
}
</style>
</head>
<body>
<!-- <div>默认展示5条，每次点击展开5条，加载到没有数据时显示收起</div> -->
<div>默认五条分页</div>
<div class="zk3">
<ul style="display: block;">
<li>陈立农1111</li>
<li>陈立农2</li>
<li>陈立农3</li>
<li>陈立农4</li>
<li>陈立农5</li>
</ul>
<ul>
<li>陈立农62222</li>
<li>陈立农7</li>
<li>陈立农8</li>
<li>陈立农9</li>
<li>陈立农10</li>
</ul>
<ul>
<li>陈立农113333</li>
<li>陈立农12</li>
<li>陈立农13</li>
<li>陈立农14</li>
<li>陈立农15</li>
</ul>
<ul>
<li>陈立农14444</li>
<li>陈立农2</li>
<li>陈立农3</li>
<li>陈立农4</li>
<li>陈立农5</li>
</ul>
<ul>
<li>陈立农655555</li>
<li>陈立农7</li>
<li>陈立农8</li>
<li>陈立农9</li>
<li>陈立农10</li>
</ul>
<ul>
<li>陈立农11666666</li>
<li>陈立农12</li>
<li>陈立农13</li>
<li>陈立农14</li>
<li>陈立农15</li>
</ul>
<ul>
<li>陈立农17777777777</li>
<li>陈立农2</li>
<li>陈立农3</li>
<li>陈立农4</li>
<li>陈立农5</li>
</ul>
<ul>
<li>陈立农68888888888</li>
<li>陈立农7</li>
<li>陈立农8</li>
<li>陈立农9</li>
<li>陈立农10</li>
</ul>
<ul>
<li>陈立农11999999999999999</li>
<li>陈立农12</li>
<li>陈立农13</li>
<li>陈立农14</li>
<li>陈立农15</li>
</ul>
<!-- <div>展开</div> -->
</div>
<nav>
<div class="prev" style="
position: absolute;
left: 5px;
margin-top: 8px;
">上一页</div>
<ul>
<li style="background: gray;">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<div class="next" style="
position: absolute;
left: 29%;
margin-top: 8px;
">下一页</div>
</nav>
<script type="text/javascript" src="http://60.205.143.183:8888/js/jquery-1.12.4.js"></script>
<script>
var indexlen = 0;
$('nav li').on({
click: function () {
var index = $(this).index();
$(this).css('background', 'gray').siblings().css('background', 'brown')
$('.zk3 ul').eq(index).show().siblings().hide();
indexlen = index
}
})
$('nav div').on({
click: function () {
var conlenall = $('nav li').length;
var first = $('nav li').eq(indexlen).text();
if ($(this).html() == '上一页') {
if (indexlen > 0) {
indexlen = indexlen - 1;
$('.zk3 ul').eq(indexlen).show().siblings().hide();
$('nav li').eq(indexlen).css('background', 'gray').siblings().css('background', 'brown')
}
}
if (Number(conlenall) - 1 == indexlen) {
return;
}
if ($(this).html() == '下一页') {
indexlen = Number(first);
$('.zk3 ul').eq(indexlen).show().siblings().hide();
$('nav li').eq(indexlen).css('background', 'gray').siblings().css('background', 'brown')
}
}
})
</script>
</body>
</html>
网友评论