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页面添加到收藏夹的简单方法
Aug 07 Javascript
js中substring和substr的定义和用法
May 05 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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弹出对话框技巧详细解读
2015/09/26 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
英语演讲稿范文
2014/01/03 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
答辩状格式范本
2015/05/22 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
Mysql中mvcc各场景理解应用
2022/08/05 MySQL