溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
效果圖：
代碼如下：
<!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>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
