本文实例为大家分享了JavaScript实现tabs切换功能的具体代码，供大家参考，具体内容如下
自定义插件实现tabs切换功能
这是HTML代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
(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