swiperjs实现导航与tab页的联动

站长资源 2024/11/6 佚名

62 1538 62

相思资源网 Design By www.200059.com

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

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

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  *{
   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;
  }
 </style>
 <link rel="stylesheet" href="./public/swiper.min.css" >
</head>
<body>
  <div class="mains">
    <div class="tab swiper-container">
     <ul class="rank_ul swiper-wrapper">
      <li style="background: #de5055;color:#fff;border-color: #de5055;" class="swiper-slide">女包女鞋榜</li>
      <li class="swiper-slide">家居榜</li>
      <li class="swiper-slide">化妝品榜</li>
      <li class="swiper-slide">女装榜</li>
      <li class="swiper-slide">男装榜</li>
     </ul>
    </div>
    <div class="swiper-container swiper-container8 swiper-bg">
     <div class="swiper-wrapper">
     <div class="swiper-slide">
       女包女鞋榜
       <p>sada</p>
       <p>sada</p>
       <p>sada</p>
       <p>sada</p>
     </div>
     <div class="swiper-slide">
       家居榜
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
       <p>asd</p>
     </div>
     <div class="swiper-slide">
       化妝品榜
     </div>
     <div class="swiper-slide">
       女装榜
     </div>
     <div class="swiper-slide">
       男装榜
     </div>
     </div>
     </div>
    </div>
    </div>
 <script src="/UploadFiles/2021-04-02/jquery.min.js">

效果图：


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