个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 31 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JavaScript自定义插件实现tabs切换功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

2.点击进行切换:

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/qq_42881159/article/details/115530423 。

最后此篇关于JavaScript自定义插件实现tabs切换功能的文章就讲到这里了,如果你想了解更多关于JavaScript自定义插件实现tabs切换功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

31 4 0
文章推荐： JavaScript实现循环轮播图
文章推荐： jQuery实现手风琴小案例
文章推荐： js实现一个简易的计算器
文章推荐： React嵌套组件的构建顺序
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com