当前位置：首页 > Web前端 > CSS

基于swiper的Tab标签

时间：2023-03-31 14:03:53 CSS

标签种类繁多，今天又要用到tabs，首选swiper！1.HTML布局根据swiper官网的要求，对slider进行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:50pxauto;width:800px}.swiperTab{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center}.swiperTabli{display:flex;height:48px;border-left:1pxsolid#dfdfdf;background-color:#ddf8ff;cursor:pointer;flex:1;flex-direction:row;justify-content:center;align-items:center}.swiperTabli:first-child{border-left:1pxsolidtransparent}.swiperTabli.active{background-color:#f60;color:#fff}.swiperTabli:nth-child(1).active{background-color:#9acd32}.swiperTabli:nth-child(2).active{background-color:green}.swiperTabli: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/*swipertab功能参数说明*obj必填，导航列表*swiperObj:必填，HTML元素或字符串类型，Swiper容器的css选择器*className:必填，当前样式的类名*effect:可选，过渡效果,默认为"slide",可设置为"fade,cube,coverflow,flip"*其他参数参考官网http://www.swiper.com.cn**/functiontabs(obj,swiperObj,className){vartabSwiper=newSwiper(swiperObj,{effect:'flip',//切换效果speed:500,//滑动速度，单位msautoHeight:true,//高度随内容变化onSlideChangeStart:function(){$(obj+"."+className).removeClass(className);/*删除带有当前类名的类名，将当前类名添加到下一个*/$(obj).eq(tabSwiper.activeIndex).addClass(className);/*activeIndex是转换后的幻灯片索引*/}});//模拟点击事件，如果是Move事件，将mousedown改为mouseenter$(obj).on('touchstartmousedown',function(e){e.preventDefault();/*清除默认事件*/$(obj+"."+className).removeClass(className);$(this).addClass(className);/*点击当前导航改变当前样式*/tabSwiper.slideTo($(this).index());/*滑动到相应的滑块*/});$(obj).click(function(e){e.preventDefault();/*清除默认点击事件*/});4.js调用先引入相关的js前端小白刚学了JS的缺点，不吝赐教。谢谢！5.扩展经常遇到从另一个页面直接跳转到tab对应的内容例如：点击page.html中的a标签直接跳转到对应的显示页面，我们直接在href中添加锚点，并且锚点包含一个数字，该数字是对应标签的索引值0,1,2ShowDiv+CSS显示JavaScript+JQuerySngularJS+Vue+NodeJs如何对上面的案例稍作修改：在设置初始化时在swiperTab.js中添加slideIndexinitialSlide:index在回调函数中传入参数index判断tabSwiper是否存在，否则报错hash值不为0时会上报。functiontabs(obj,swiperObj,className,index){vartabSwiper=newSwiper(swiperObj,{initialSlide:index,//设置幻灯片在初始化时的索引effect:'flip',speed:500,autoHeight:true,onSlideChangeStart:function(){if(tabSwiper){/*判断tabSwiper是否存在，否则hash值不为0时会报错*/$(obj+"."+className).removeClass(className);$(obj).eq(tabSwiper.activeIndex).addClass(className);}}});$(obj).on('touchstartmousedown',function(e){e.preventDefault();$(obj+"."+className).removeClass(className);$(this).addClass(className);tabSwiper。slideTo($(this).index());});$(obj).click(function(e){e.preventDefault();});}调用时根据hash值改变索引值index（因为我们在a标签的href中添加了锚点）从而达到初始化swiper时改变slide索引的目的```完成案例扩展阅读我的另一篇文章使用本地存储从一个页面跳转到swiper写的全屏滚动页面的指定位置

上一篇：前端进阶系列（五）：flex布局

下一篇：项目的工具类的处理方式是什么？

基于swiper的Tab标签相关文章