摘要:根据哈希值中设置的数字显示对应的选项卡内容例如对应显示第索引值为的选项卡内容即第二个选项卡字符串转换为数字完整案例延伸阅读我的另一篇用本地存储方式从一个页面跳转到用写的全屏滚动页面的指定位置
选项卡五花八门,今天又要用到选项卡,首选swiper!
一、HTML布局根据swiper官网的要求来class命名滑块。
二、CSS样式
- Div+CSS
- JavaScript+JQuery
- AngularJS+Vue+NodeJs
随便写写,根据使用场景调整。(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
/* swiper 选项卡函数 参数说明 * obj 必选,导航列表 * swiperObj: 必选,HTML元素或者string类型,Swiper容器的css选择器 * className: 必选,当前样式的类名 * effect:可选,切换效果,默认为"slide",可设置为"fade,cube,coverflow,flip"。 * 其他参数参阅官网 http://www.swiper.com.cn * */ 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);/*activeIndex是过渡后的slide索引*/ } }); // 模拟点击事件,如果是移入事件,将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
前端小白刚学JS。不足之处,不吝言赐教。谢谢!
五、拓展 经常遇到从另一个页面直接跳转到选项卡对应的内容例如:page.html 中点击a标签直接跳转到对应展示页面。
我们在href中直接添加锚点,锚点中包含一个数字即对应选项卡的索引值0、1、2
展示 Div+CSS 展示 JavaScript+JQuery 展示 ngularJS+Vue+NodeJs
对上面的案例稍作修改:
在swiperTab.js中添加设定初始化时slide的索引 initialSlide: index
传入参数 index
在回调函数中 判断tabSwiper是否存在,否则当哈希值不为0的时候会报错 。
function tabs(obj,swiperObj,className,index) { var tabSwiper = new Swiper(swiperObj, { initialSlide: index, // 设定初始化时slide的索引 effect : "flip", speed : 500, autoHeight: true, onSlideChangeStart : function() { if(tabSwiper){ /*判断tabSwiper是否存在,否则当哈希值不为0的时候会报错 */ $(obj+"."+className).removeClass(className); $(obj).eq(tabSwiper.activeIndex).addClass(className); } } }); $(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(); }); }
在调用的时候 根据哈希值(因为我们在a标签的href中添加了锚点)来改变索引值index从而达到改变 swiper初始化时slide的索引的目的
```
完整案例
延伸阅读我的另一篇用本地存储 方式 从一个页面跳转到用swiper写的全屏滚动页面的指定位置
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/87322.html
摘要:根据哈希值中设置的数字显示对应的选项卡内容例如对应显示第索引值为的选项卡内容即第二个选项卡字符串转换为数字完整案例延伸阅读我的另一篇用本地存储方式从一个页面跳转到用写的全屏滚动页面的指定位置 选项卡五花八门,今天又要用到选项卡,首选swiper! 一、HTML布局 根据swiper官网的要求来class命名滑块。 Div+CSS Jav...
摘要:根据哈希值中设置的数字显示对应的选项卡内容例如对应显示第索引值为的选项卡内容即第二个选项卡字符串转换为数字完整案例延伸阅读我的另一篇用本地存储方式从一个页面跳转到用写的全屏滚动页面的指定位置 选项卡五花八门,今天又要用到选项卡,首选swiper! 一、HTML布局 根据swiper官网的要求来class命名滑块。 Div+CSS Jav...
摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们,如果觉得本文还不错,记得给个...
摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13 Hello 小伙伴们,如果觉得本文还不错,记得给个...
阅读 835·2021-09-09 09:32
阅读 2738·2021-09-02 10:20
阅读 2614·2021-07-23 11:24
阅读 788·2019-08-30 15:54
阅读 3595·2019-08-30 15:54
阅读 1299·2019-08-30 11:02
阅读 2795·2019-08-26 17:40
阅读 1083·2019-08-26 13:55