
/* https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js */
<div class="container">
<ul class="pagination">
<li><a href="#">上一页</a> </li>
<li><a href="#">1</a> </li>
<li><a href="#">2</a> </li>
<li><a href="#">3</a> </li>
<li><a href="#">4</a> </li>
<li><a href="#">5</a> </li>
<li><a href="#">6</a> </li>
<li><a href="#">下一页</a> </li>
</ul>
</div>
<script>
$("li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
})
</script>
CSS代码、*{
margin: 0;
padding: 0;
/*绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用*/
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
text-align: center;
background: #dde1e7;
}
.container{
background: #dde1e7;
padding: 25px;
border-radius: 4px;
box-shadow: -3px -3px 7px #ffffff73,
3px 3px 5px rgba(94,104,121,0.288);
}
.container .pagination{
display: flex;
list-style: none;
}
.container .pagination li{
flex: 1;
margin: 0 5px;
background: #dde1e7;
border-radius: 5px;
box-shadow: -3px -3px 7px #ffffff73,
3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li a{
font-size: 20px;
text-decoration: none;
color: #4d4d4d;
height: 45px;
width: 50px;
display: block;
line-height: 45px;
}
.pagination li:first-child a{
width: 100px;
}
.pagination li:last-child a{
width: 100px;
}
.pagination li:first-child{
margin: 0 10px 0 0;
}
.pagination li:last-child{
margin: 0 0 0 10px;
}
.pagination li.active{
box-shadow:inset -3px -3px 7px #ffffff73,
inset 3px 3px 5px rgba(94,104,121,0.288);
}
.pagination li.active a{
font-size: 20px;
color: #D51C41;
}
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
评论(1)
已阅,感谢站长分享!