swiperjs实现导航与tab页的联动


Posted in Javascript onDecember 13, 2020

本文实例为大家分享了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">化?y品榜</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">
       化?y品榜
     </div>
     <div class="swiper-slide">
       女装榜
     </div>
     <div class="swiper-slide">
       男装榜
     </div>
     </div>
     </div>
    </div>
    </div>
 <script src="./public/jquery.min.js"></script>
 <script src="./public/swiper.min.js"></script>
 <script>
  var swiper = new Swiper(".swiper-container8",{
   on:{
    slideChange: function(){
     $(".rank_ul li").css("background","none");
     $(".rank_ul li").css("color","black");
     $(".rank_ul li").css("border-color","#e0e0e0");
     $(".swiper-container8").css("height","auto")
     $(".swiper-container8").css("height",$(".swiper-container8 .swiper-slide").eq(this.activeIndex).height())
     $(".rank_ul li").eq(this.activeIndex).css("background","#de5055");
     $(".rank_ul li").eq(this.activeIndex).css("border-color","#de5055");

     $(".rank_ul li").eq(this.activeIndex).css("color","#fff");
    },
   }
  });
  var tab = new Swiper(".tab",{
   slidesPerView : 3.5,
   watchSlidesProgress : true,
   watchSlidesVisibility : true,
  });
  var ul = document.getElementsByClassName("rank_ul")[0];
  var lis = ul.children;
  $(".swiper-container8").css("height",$(".swiper-container8 .swiper-slide").eq(0).height())
  for(var i = 0;i < lis.length;i++){
   var li = lis[i];
   li.index = i;
   li.onclick = function(){
   $(".rank_ul li").css("background","none");
   $(".rank_ul li").css("color","black");
   $(".rank_ul li").css("border-color","#e0e0e0");
   $(this).css("background","#de5055");
   $(this).css("color","#fff");
   $(this).css("border-color","#de5055");
   $(".swiper-container8").css("height","auto")
   $(".swiper-container8").css("height",$(".swiper-container8 .swiper-slide").eq(this.index).height())
   swiper.slideTo(this.index);
   } 
  }
 </script>
</body>
</html>

效果图:

swiperjs实现导航与tab页的联动

swiperjs实现导航与tab页的联动

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
菜鸟javascript基础整理1
Dec 06 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
总结js函数相关知识点
Feb 27 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
Vue实现简单购物车功能
Dec 13 #Vue.js
javascript前端实现多视频上传
Dec 13 #Javascript
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
js实现滚动条自动滚动
Dec 13 #Javascript
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
You might like
Yii控制器中操作视图js的方法
2016/07/04 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
python判断windows隐藏文件的方法
2014/03/21 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python元字符的用法实例解析
2018/01/17 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
python中数据库like模糊查询方式
2020/03/02 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
上班上网检讨书
2014/01/29 职场文书
房屋转让协议书范本
2014/04/11 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
2015员工年度考核评语
2015/03/25 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
奖金申请报告模板
2015/05/15 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript