效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.scroll-tool{
position: relative;
height: 56px;
padding: 12px 160px;
background-color: #f9f9f9;
}
.st-con{
font-size: 14px;
line-height: 30px;
text-align: center;
padding: 12px 0;
width: 680px;
margin: 0 auto;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
}
.st-con .img-page{
font-size: 0;
}
a{
text-decoration: none;
}
.st-con a.selected{
background-color: #d3a12a;
}
.st-con a{
font-size: 14px;
display: inline-block;
width: 30px;
height: 30px;
color: #fff;
border-radius: 3px;
background-color: #44c6ea;
margin: 0 5px;
}
html,body{
background: #f0f0f0;
font: 14px/2 "微软雅黑";
}
header{
width: 680px;
height: 50px;
margin: 50px auto;
}
header div{
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
color: #999;
}
</style>
</head>
<body>
<header>
<div>
简约下一页页码效果
</div>
</header>
<div class="scroll-tool">
<div class="st-con">
<div class="img-page">
<a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="selected"><span>1</span></a>
<a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>2</span></a>
<a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>3</span></a>
<a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>4</span></a>
<a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>5</span></a>
<a href="javacript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span>6</span></a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('.img-page a').on('click',function(){
$(this).addClass('selected').siblings('a').removeClass('selected');
})
})
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持天达云！