您的位置：首页 > Web前端 > JavaScript

JavaScript自定义插件实现tabs切换功能

2021-04-15 04:06 966 查看

本文实例为大家分享了JavaScript实现tabs切换功能的具体代码，供大家参考，具体内容如下

自定义插件实现tabs切换功能

这是HTML代码：

<script src="jquery-3.1.0.js"></script>
<script src="plugs/demo01.js"></script>
<style>
#tabs>div{
height: 200px;
width: 200px;
background-color: pink;
display: none;
}
#tabs div.div-active{
display: block;
}
.btn-active{
background-color: orange;
}
</style>

这是js代码：

(function ($) {
//tabs插件
$.fn.tabs=function (options) {
let defaults = {
activeIndex:1,
titleActive:"btn-active",
contentActive:"div-active",
attr:"rel"
}
/*合并参数*/
$.extend(defaults,options);
/*获取所有按钮*/
let btns=this.find("["+defaults.attr+"]");
/*获取rel中的值*/
let rels=[];
btns.each(function (index,element) {
rels.push($(element).attr(defaults.attr));
});
/*获取所有div*/
let divs=this.find(rels.toString());
/*判断指定下标是否越界*/
if(defaults.activeIndex > btns.length-1){
defaults.activeIndex = 0;
}
/*设置默认显示的内容*/
btns.eq(defaults.activeIndex).addClass(defaults.titleActive);
divs.eq(defaults.activeIndex).addClass(defaults.contentActive);
/*给按钮绑定单击事件*/
btns.click(function () {
$(this).addClass(defaults.titleActive)
.siblings().removeClass(defaults.titleActive);
divs.eq($(this).index()).addClass(defaults.contentActive)
.siblings().removeClass(defaults.contentActive);
});
}
})(jQuery);

最后的代码截屏

1.默认

2.点击进行切换：

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js tabs 切换

相关文章推荐

新的分享

章节导航