swiperjs实现导航与tab页的联动
更新时间：2020年12月13日 14:18:34 作者：前端小白
这篇文章主要为大家详细介绍了swiperjs实现导航与tab页的联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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="./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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序实现多行文字滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要介绍了Bootstrap v4 sass设计的相关资料,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了Javascript中数组方法汇总(推荐),需要的朋友可以参考下2015-04-04
本文给大家介绍了JavaScript中的逻辑或运算符||的用法,包括其基本概念、真值和假值、常见应用以及与其他逻辑运算符的对比,感兴趣的朋友跟随小编一起看看吧2024-12-12
众所周知,小程序文件上传还是有点麻烦的,其实主要还是小程序对的接口有诸多的不便,比如说,文件不能批量提交,只能一个个的提交,小程序的上传需要专门的接口,现在给大家分享小程序多文件上传 Tdesign的方法,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了异步JS框架的作用以及使用方法2015-10-10
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
下面小编就为大家带来一篇关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
有时编写 Web 应用的代码会感觉充满魔力，因为我们只是写了一系列字符，就能在浏览器里看到效果了。但是理解魔法背后的技术，可以帮助你更好地提高编程技巧2015-12-12
在javascript中，数组对象有一个有趣的方法sort，它接收一个类型为函数的参数作为排序的依据。这意味着开发者只需要关注如何比较两个值的大小，而不用管排序这件事内部是如何实现的2018-06-06
这篇文章主要为大家详细介绍了js实现中国象棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
最新评论