个人中心
gpt4 book ai didi

原生javascript实现Tab选项卡切换功能

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

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

这篇CFSDN的博客文章原生javascript实现Tab选项卡切换功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

分析个人用原生JS获取类名元素的代码:

  。

复制代码 代码如下:

getByClassName:function(className,parent){
            var elem = [],
                node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
                p = new RegExp("(^|\\s)"+className+"(\\s|$)");
            for(var n=0,i=node.length;n<i;n++){
                if(p.test(node[n].className)){
                    elem.push(node[n]);
                }
            }
            return elem;
        }

  。

　　parent参数是可选的，但需要先判断它是否存在，且是节点dom元素 parent != undefined&&parent.nodeType==1 ，nodeType == 1可以判断节点是否为dom元素，在火狐浏览器里面，空白也算是节点（.childnodes），用这个属性就判断是否为dom元素，排除空白符. 。

移除元素的类名:

  。

复制代码 代码如下:

var cur = new RegExp(this.sCur,'g');  //this.sCur就是类名，这里是用变量保存 如：this.sCur = "cur";
           this.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'');        

  。

调用例子:

  。

复制代码 代码如下:

<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">     body,p,ul,li {padding: 0;margin: 0;}     ul {list-style: none;}        h3 {padding: 5px;background-color: #999;margin-bottom: 10px;}     pre {border: 1px dotted #000;}     .explan {padding: 10px;color: #333;line-height: 1.6;}     .box {width: 300px;height:100px;border: 1px solid #ccc;}     .box ul{height: 30px;line-height: 30px;}     .box ul li {float: left;display: inline;width: 150px;text-align: center;background-color: #eee;cursor: pointer;}     .box .tab-cur {background-color: #000;color: #fff;}     .box p {display: none;padding: 30px;}     /*tabB*/     #tabB {width: 450px;}     .box .tab-cur02 {background-color: #025023;}     </style> </head> <body>     <div class="explan">         <strong>使用阅读 ：</strong> <br>         　　  {'tabBtn':'#tabA .tab-i','tabCon':'#tabA .tab-c','cur':'tab-cur'} 【必选】 <br>         　　（1）'tabBtn':'#tabA .tab-i','tabCon':'#tabA .tab-c'　　选择器：只支持 #id　.className，(ID + 空格 + 类名) 【必选】<br>         　　（2）'cur':'tab-cur'（默认） ：为切换按钮当前状态（类名）【必选】<br>         　　（3）'type':'mouseover'|| 'clicl' 默认是点击 【可选】     </div>     <h3>tabA</h3>      <pre>new LGY_tab({'tabBtn':'#tabA .tab-i',     'tabCon':'#tabA .tab-c',     'cur':'tab-cur'     });          </pre>     <div class="box" id="tabA">         <ul>             <li class="tab-i">btn-A</li>             <li class="tab-i">btn-B</li>         </ul>         <p class="tab-c">con-A</p>         <p class="tab-c">con-B</p>     </div> 。

  。

    <h3>tabB</h3>      <pre>new LGY_tab({'tabBtn':'#tabB .tab-i',     'tabCon':'#tabB .tab-k',     'cur':'tab-cur02',     'type':'mouseover'     });          </pre>     <div class="box" id="tabB">         <ul>             <li class="tab-i">btn-A</li>             <li class="tab-i">btn-B</li>             <li class="tab-i">btn-C</li>         </ul>         <p class="tab-k">con-A</p>         <p class="tab-k">con-B</p>         <p class="tab-k">con-C</p>     </div>     <script type="text/javascript" src="下方的代码段.js"></script>     <script type="text/javascript">     //     new LGY_tab({'tabBtn':'#tabA .tab-i',                  'tabCon':'#tabA .tab-c',                  'cur':'tab-cur'     });     //     new LGY_tab({'tabBtn':'#tabB .tab-i',                  'tabCon':'#tabB .tab-k',                  'cur':'tab-cur02',                  'type':'mouseover'     });     //test     //     new LGY_tab({'tabBtn':'#tabB .tab-j',                  'tabCon':'#tabB .tab-k',                  'cur':'tab-cur02',                  'type':'mouseover'     });     </script> </body> </html> 。

  。

JS详细代码:

  。

复制代码 代码如下:

function LGY_tab(option){
    this.oTab_btn = this.getDom(option.tabBtn);//切换点击的元素
    this.oTab_clist = this.getDom(option.tabCon); //切换的内容
    if(!this.oTab_btn || !this.oTab_clist) return;
    this.sCur = option.cur; //激活的状态
    this.type = option.type || 'click';
    this.nLen = this.oTab_btn.length;
    this.int();
}
LGY_tab.prototype = {
    getId:function(id){
        return document.getElementById(id);
    },
    getByClassName:function(className,parent){
        var elem = [],
            node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
            p = new RegExp("(^|\\s)"+className+"(\\s|$)");
        for(var n=0,i=node.length;n<i;n++){
            if(p.test(node[n].className)){
                elem.push(node[n]);
            }
        }
        return elem;
    },
    getDom:function(s){
        var nodeName = s.split(' '),
            p = this.getId(nodeName[0].slice(1)),
            c = this.getByClassName(nodeName[1].slice(1),p);
        if(!p || c.length==0) return null;
        return c;
    },
    change:function(){
        var cur = new RegExp(this.sCur,'g');
        for(var n=0;n<this.nLen;n++){
            this.oTab_clist[n].style.display = 'none';
            this.oTab_btn[n].className = this.oTab_btn[n].className.replace(cur,'');
        }
    },
    int:function(){
        var that = this;
        this.oTab_btn[0].className += ' '+this.sCur;
        this.oTab_clist[0].style.display = 'block';
        for(var n=0;n<this.nLen;n++){
            this.oTab_btn[n].index = n;
            this.oTab_btn[n]['on'+this.type] = function(){
                that.change();
                that.oTab_btn[this.index].className +=' ' + that.sCur;
                that.oTab_clist[this.index].style.display = 'block';
            }
        }
    }
}

  。

  。

最终效果图展示:

原生javascript实现Tab选项卡切换功能

效果是不是很棒呢，而且兼容性也不错，代码也很简洁，完全可以替代庞大的jQuery选项卡切换插件了.

最后此篇关于原生javascript实现Tab选项卡切换功能的文章就讲到这里了,如果你想了解更多关于原生javascript实现Tab选项卡切换功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： vue 将多个过滤器封装到一个文件中的代码详解
文章推荐： js实现可爱的气泡特效
文章推荐： js实现点击按钮随机生成背景颜色
文章推荐： 推荐4个原生javascript常用的函数
qq735679552
个人简介

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

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