swiper 移动端选项卡_基于swiper的Tab选项卡

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

一、HTML布局

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

• Div+CSS
• JavaScript+JQuery
• AngularJS+Vue+NodeJs

千寻Div+CSS

阿飞JavaScript+JQuery

无虑AngularJS+Vue+NodeJs

二、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