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----文件操作
Jan 18 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
vue项目中axios使用详解
Feb 07 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
十天学会php之第四天
2006/10/09 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
几种tab切换详解
2017/02/03 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
保外就医申请书范文
2015/08/06 职场文书
Python 绘制多因子柱状图
2022/05/11 Python