本文实例为大家分享了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.点击进行切换：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_42881159/article/details/115530423
查看更多关于JavaScript自定义插件实现tabs切换功能的详细内容...