本文介绍如何使用 JavaScript 和 jQuery 开发一个轻量级的 Tabs 切换插件。通过封装 $.fn.tabs 方法，支持配置默认激活索引、标题与内容区的激活类名及关联属性。代码展示了 HTML 结构定义、CSS 样式控制以及核心 JS 逻辑，实现点击切换内容并高亮对应按钮的功能。
JavaScript 实现自定义 Tabs 切换插件
本文提供了使用 JavaScript 实现 Tab 标签页切换功能的具体代码示例，供读者参考学习。
通过自定义插件的方式来实现 Tab 标签页的切换交互。
HTML 结构代码
以下是相关的 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>JavaScript 核心逻辑
接下来是核心的 JavaScript 实现代码：
(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. 点击按钮进行内容切换的效果。
以上就是本文的全部内容，希望能为读者的学习带来帮助，同时也欢迎大家继续支持本站。