一款兼容pc 移动端的tab切换

利用touchslider.js插件来制作的tab切换，可任意修改很方便~~~

样式：

 <style>

     .box-163css{ width:100%; position:relative; height:360px;margin-bottom:20px; float:left;}
     /*swipe*/
     .swipe{ padding-top:20px; width:100%; float:left;overflow: hidden; visibility: visible; position: relative; height:260px;}
     .box01_list{position:relative; -webkit-transition: left 600ms ease-out;  width:100%; left:;}
     .li_list{width:100%;position:relative; float: left; vertical-align: top;}
     /*pic_list*/
     .pic_list{padding:0 2%;width:96%; float:left; margin-bottom:15px;}
     .pic_list img{ float:left; width:120px;}
     .pic_list span{ float:left; padding:10px 0 0 2%; font-size:16px; width:50%;}

     /*news_list*/
     .news_list{ width:98%; padding:0 1%; float:left;}
     .news_list p{ width:100%; float:left; border-bottom:1px solid #ddd; height:30px; line-height:30px;}
     .news_list a{ float:left; padding-left:1%; font-size:15px;}
     .s_arrow{ display:block; border-top:2px solid #ccc;border-right:2px solid #ccc; -webkit-transform:rotate(45deg); width:6px; height:6px; float:right; margin:6px 10px 0 0;}
     /*page*/
     .page{ text-align:left; background:#f3f3f3; height:38px; line-height:38px; width:100%;
         display:-webkit-box; display:-o-box;display:-moz-box; display:box;}
     .page li{-webkit-box-flex:;-moz-box-flex:;-o-box-flex:;box-flex:; font-size:18px; display:block; color:#000; height:38px; line-height:38px; text-align:center; }
     .page li a{ color:#000; display:block; height:38px;}
     .page a.active{color:#f00;border-bottom:1px solid #c00;}
     .go_btn{margin: 6px auto 12px auto;height: 34px;width: 92%;border: 1px solid #B9B9B9;text-align: center;line-height: 34px;font-size: 16px;
         background: -webkit-gradient(linear,0 0,0 100%,from(whiteSmoke),to(#E3E3E3));background: -moz-linear-gradient(top,whiteSmoke,#E3E3E3);
         -webkit-border-radius: 3px;border-radius: 3px; display:block; float:left; margin-left:2.5%;}
 </style>

html部分：

 <div class="box-163css">
     <ul id="pagenavi1" class="page">
         <li><a href="" class="active">新闻</a></li>
         <li><a href="">产品</a></li>
         <li><a href="">游戏</a></li>
         <li><a href="">下载</a></li>
     </ul>
     <div id="slider1" class="swipe">
         <ul class="box01_list">
             <li class="li_list">
                 <div class="pic_list"><img src="img05.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
                 <div class="news_list">
                     <p><span class="s_arrow"></span><a href="#">曝湖人惊天交易:造跑轰三人组</a></p>
                     <p><span class="s_arrow"></span><a href="#">金志文圈钱:婚礼被曝卖700万</a></p>
                     <p><span class="s_arrow"></span><a href="#">[博]习总上任让日本非常恐慌</a></p>
                     <p><span class="s_arrow"></span><a href="#">10时播热火|书豪遭弃用</a></p>
                 </div>
             </li>
             <li class="li_list">
                 <div class="pic_list"><img src="img06.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
                 <div class="news_list">
                     <p><span class="s_arrow"></span><a href="#">日本耗1天半追千里缉捕台渔船</a></p>
                     <p><span class="s_arrow"></span><a href="#">安徽检察院办大案有功获1等功</a></p>
                     <p><span class="s_arrow"></span><a href="#">李庄提告重庆专案组徇私枉法</a></p>
                     <p><span class="s_arrow"></span><a href="#">外交部新任女发言人被赞漂亮</a></p>
                 </div>
             </li>
             <li class="li_list">
                 <div class="pic_list"><img src="img07.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
                 <div class="news_list">
                     <p><span class="s_arrow"></span><a href="#">警方:30韩国生在京抢劫系误会</a></p>
                     <p><span class="s_arrow"></span><a href="#">沪68岁父亲杀39岁"啃老"独子</a></p>
                     <p><span class="s_arrow"></span><a href="#">三亚免税店自曝大部分是假货</a></p>
                     <p><span class="s_arrow"></span><a href="#">组图:跟拍情侣间的"私密"生活</a></p>
                 </div>
             </li>
             <li class="li_list">
                 <div class="pic_list"><img src="img08.jpg"><span><a href="#">赵本山那英曾联袂演台剧兄妹</a></span></div>
                 <div class="news_list">
                     <p><span class="s_arrow"></span><a href="#">评:日"泥鳅"首相变酗酒老宅男</a></p>
                     <p><span class="s_arrow"></span><a href="#">围观:72岁翁穿女装网店当模特</a></p>
                     <p><span class="s_arrow"></span><a href="#">[博]习总上任让日本非常恐慌</a></p>
                     <p><span class="s_arrow"></span><a href="#">外交部新任女发言人被赞漂亮</a></p>
                 </div>
             </li>
         </ul>

     </div>

 </div>

js部分：

for(n=1;n < 3;n++){

   var page='pagenavi'+n;

   var mslide='slider'+n;

   var mtitle='emtitle'+n;

   arrdiv = 'arrdiv' + n;

   var as=document.getElementById(page).getElementsByTagName('a');

   var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){

      var as=document.getElementById(this.page).getElementsByTagName('a');

      as[this.p].className='';

      as[index].className='active';

      this.p=index;

      var txt=as[index].innerText;

      $("#"+this.page).parent().find('.emtitle').text(txt);

      var txturl=as[index].getAttribute('href');

      var turl=txturl.split('#');

      $("#"+this.page).parent().find('.go_btn').attr('href',turl[1]);

   }});

   tt.page = page;

   tt.p = 0;

   //console.dir(tt); console.dir(tt.__proto__);

   for(var i=0;i < as.length;i++){

      (function(){

         var j=i;

         as[j].tt = tt;

         as[j].onclick=function(){

            this.tt.slide(j);

            return false;

         }

      })();

   }

}

别忘记了要添加touchslider.js插件哦~~

效果图：

不明白的小伙伴可以自行去下载哦~~~~~

链接: http://pan.baidu.com/s/1eSNWovg 密码: 4s7p