效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
$(".page").click(function(){
$(this).parent().siblings().children().removeClass("active");
$(this).addClass("active");
});
$(".prev").click(function(){
if($(".active").length>0){
if($(".active").attr("class").toString().split(' ')[0]=="begin"){
}
else{
$(".active").removeClass("active").parent().prev().children().addClass("active");
}
}
else{
$(".begin").addClass("active");
}
});
$(".next").click(function(){
if($(".active").length>0){
if($(".active").attr("class").toString().split(' ')[0]=="end"){
}
else{
$(".active").removeClass("active").parent().next().children().addClass("active");
}
}
else{
$(".end").addClass("active");
}
});
})
</script>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
ul.pagination li a.active {
background-color: #4CAF55;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<ul class="pagination">
<li><a class="prev" href="#">«</a></li>
<li><a class="begin" href="#">1</a></li>
<li><a class="page" href="#">2</a></li>
<li><a class="page" href="#">3</a></li>
<li><a class="page" href="#">4</a></li>
<li><a class="page" href="#">5</a></li>
<li><a class="page" href="#">6</a></li>
<li><a class="end" href="#">7</a></li>
<li><a class="end" href="#">8</a></li>
<li><a class="end" href="#">9</a></li>
<li><a class="next" href="#">»</a></li>
</ul>
</body>
</html>
解释：
1.
第一个分页按钮和最后一个分页按钮类名分别是prev、end，其余为page
2.
为其添加样式
3.jQuery部分
（1）先为类名为page的按钮添加点击事件
（2）为prev和next按钮添加点击事件
1、先判断是否有page按钮处于激活状态（被点击）
if($(".active").length>0){
......
}
else{
......
}
2、再判断处于激活状态的page按钮是否为1（begin）或者9（end），如果是则点击prev或者next按钮不会向前移动，不是则向前或向后移动
if($(".active").length>0){
if($(".active").attr("class").toString().split(' ')[0]=="begin"){}
else{
$(".active").removeClass("active").parent().prev().children().addClass("active");
}
}
else{
$(".begin").addClass("active");
}
2166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
