制作一个滑动的选项卡

首先，要有一个显示窗口，设置属性为超出部分隐藏，然后将下面选项的所有内容平铺在网页中，每张选项的长度都一样，

给它一个相对定位，每个选项下标对应一张选项图，相对于初始位置往左或者往右移动多少张选项图的位置

代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

< div  class="toutiao">      < div  class="newsbox">      < div  class="newstab">          < ul  class="newstabs">              < li  class="yjk" onclick="yidong('0','0')">头条</ li >                  < li  class="yjk"  onclick="yidong('353','1')">新闻</ li >              < li  class="yjk"  onclick="yidong('706','2')">公告</ li >              < li  class="yjk"  onclick="yidong('1059','3')">活动</ li >              < li  class="yjk"  onclick="yidong('1412','4')">直播</ li >              < li  id="more">更多+</ li >          </ ul >      </ div >        < div  class="listpart">      < div  class="listbox">                  < ul  class='xiangmu'>                < ul  class='xiangmu'>               < ul  class='xiangmu'>               < ul  class='xiangmu'>               < ul  class='xiangmu'>                 </ div >          </ div >      </ div > </ div >

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

.toutiao{      width :  393px ;      height :  300px ;      position :  relative ;      margin :  15px  280px  0  0 ;      background :  #fff ;      overflow :  hidden ;      float :  left ; } .newsbox{      width :  393px ;      height : 281px ;      position :  relative ;      overflow :  hidden ;      outline :  none ;      padding :  15px  20px  0 ; } .newstab{      width :  353px ;      height :  43px ; } .newstabs li:hover{      color :  #01B8A9 ; } .newstabs{      width :  351px ;      height :  43px ;      overflow :  hidden ;      list-style :  none ; } .newstabs li{      width :  50px ;      height :  43px ;      float :  left ;      font-size :  14px ;      color :  #000 ;      line-height :  43px ;      text-align :  center ;      font-weight :  400 ;      cursor :  pointer ; } #more{      width :  50px ;      height :  43px ;      float :  right ;      font-size :  15px ;      color :  #000000 ;      cursor :  pointer ; } .listpart{      width :  351px ;      height :  222px ;      position :  relative ;      border-top :  1px  solid  #e4eae9 ;      overflow :  hidden ;      z-index :  1 ; } .listbox{      width :  1765px ;      height :  204px ;      top :  15px ;      position :  absolute ;      left :  0 ; } .xiangmu{      width :  353px ;      height :  204px ;      float :  left ;      font-size :  13px ;      list-style :  none ; }

 下面是js方法

1 2 3 4 5 6 7 8 9 10

//选项卡滚动 function  yidong(n,m){      var  a=-n+ "px" ;      $( ".yjk" ).css( "color" , "#000" );      $( ".yjk" )[m].style.color= "#01B8A9" ;      $( ".listbox" ).stop().animate({          left:a      });       }

转载于:https://www.cnblogs.com/gaowc/p/10700301.html