本文实例为大家分享了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.点击进行切换：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。