溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹利用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 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>關于利用swiperjs怎么實現導航與tab頁的聯動就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
