js实现下一页页码效果

网络编程 2021-07-04 19:20www.168986.cn编程入门

本文主要介绍了js实现下一页页码效果的实例，具有很好的参考价值。狼蚁网站SEO优化跟着长沙网络推广一起来看下吧

效果图

代码如下

<!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./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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望多多支持狼蚁SEO！

上一篇：js上下视差滚动简单实现代码下一篇：原生JS中slice()方法和splice()区别

js实现下一页页码效果

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

js实现下一页页码效果

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设