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

本文实例为大家分享了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.默认