html利用什么技术swiper,利用swiperjs怎么实现导航与tab页的联动

利用swiperjs怎么实现导航与tab页的联动

发布时间：2020-12-14 14:16:05

来源：亿速云

阅读：81

作者：Leah

这篇文章给大家介绍利用swiperjs怎么实现导航与tab页的联动，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

主要实现了以下功能：

1.点击导航栏切换tab

2.tab页高度自适应不会影响布局

3.导航栏的拖动

4.tab页的滑动与导航栏联动

代码如下：html>

Document

*{

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;

}

• 女包女鞋榜
• 家居榜
• 化妝品榜
• 女装榜
• 男装榜

女包女鞋榜

sada

sada

sada

sada

家居榜

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

asd

化妝品榜

女装榜

男装榜