swiperjs实现导航与tab页的联动

本文实例为大家分享了swiperjs实现导航与tab页的联动，供大家参考，具体内容如下

这里主要实现了以下功能：

1.点击导航栏切换tab
2.tab页高度自适应不会影响布局
3.导航栏的拖动
4.tab页的滑动与导航栏联动

代码如下：

 
 
 
 
 
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
  html,body{
   width: 100%;
  }
  .mains{
   width: 350px;
   height: 500px;
   background: skyblue;
   margin: 0 auto;
  }
  .tab,ul{
   width: 350px;
   height: 30px;
  }
  li{
   height: 30px;
   margin-right: 5px;
  }
  .swiper-bg{
   background: gray;
  }
 
 


  
    
     

      
女包女鞋榜
      
家居榜
      
化妝品榜
      
女装榜
      
男装榜
     
    
    
     
     
女包女鞋榜
sada
sada
sada
sada
     
     
家居榜
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
asd
     
     
化妝品榜
     
     
女装榜
     
     
男装榜
     
     
     
    
    
 
 
 

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。