基于swiper的Tab选项卡

选项卡五花八门，今天又要用到选项卡，首选swiper！

一、HTML布局

根据swiper官网的要求来class命名滑块。

<div class="box">
<ul class="swiperTab">
<li> <span>Div+CSS</span> </li>
<li> <span>Javascript+JQuery</span> </li>
<li> <span>AngularJS+Vue+NodeJs</span> </li>
</ul>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">千寻Div+CSS</div>
<div class="swiper-slide">阿飞Javascript+JQuery</div>
<div class="swiper-slide">无虑AngularJS+Vue+NodeJs</div>
</div>
</div>
</div>

二、CSS样式

随便写写，根据使用场景调整。（PS：推荐一个在线美化工具）

*{margin:0;padding:0}
li{list-style:none}
.box{margin:50px auto;width:800px}
.swiperTab{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}
.swiperTab li{display:flex;height:48px;border-left:1px solid #dfdfdf;background-color:#ddf8ff;cursor:pointer;flex:1;flex-direction:row;justify-content:center;align-items:center}
.swiperTab li:first-child{border-left:1px solid transparent}
.swiperTab li.active{background-color:#f60;color:#fff}
.swiperTab li:nth-child(1).active{background-color:#9acd32}
.swiperTab li:nth-child(2).active{background-color:green}
.swiperTab li:nth-child(3).active{background-color:pink}
.swiper-slide{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px}
.swiper-slide:nth-child(1){height:200px;background-color:#9acd32}
.swiper-slide:nth-child(2){height:300px;background-color:green}
.swiper-slide:nth-child(3){height:100px;background-color:pink}

三、Js封装

自己封装的选项卡函数swiperTab.js

function tabs(obj,swiperObj,className) {
var tabSwiper = new Swiper(swiperObj, {
effect : 'flip',//切换效果
speed : 500, //滑动速度，单位ms
autoHeight: true, // 高度随内容变化
onSlideChangeStart : function() {
$(obj+"."+className).removeClass(className); 
$(obj).eq(tabSwiper.activeIndex).addClass(className);
}
});
// 模拟点击事件，如果是移入事件，将mousedown 改为 mouseenter
$(obj).on('touchstart mousedown', function(e) {
e.preventDefault();
$(obj+"."+className).removeClass(className);
$(this).addClass(className); 
tabSwiper.slideTo($(this).index());
});
$(obj).click(function(e) {
e.preventDefault();
});
}

四、Js调用

首先引入相关js

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<script src="js/swiperTab.js"></script>
<script>

$(function () {
//swiperTab 是你导航的className,active是你当前状态的className
$('.swiperTab > li').eq(0).addClass('active');
tabs('.swiperTab > li','.swiper-container','active');
});
</script>

教程完