原生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';
            }
        }
    }
}

最终效果图展示：

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

赞 (0)

相关推荐

  • js基于面向对象实现网页TAB选项卡菜单效果代码

    js基于面向对象实现网页TAB选项卡菜单效果代码

    本文实例讲述了js基于面向对象实现网页TAB选项卡菜单效果代码.分享给大家供大家参考.具体如下: 这是一款自动的网页TAB,基于面向对象的选项卡菜单,由于时间关系只做了简单的实现,界面没有美化,不多做介绍了. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mxdx-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • JS+CSS实现的经典tab选项卡效果代码

    JS+CSS实现的经典tab选项卡效果代码

    本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • 原生js实现tab选项卡切换

    原生js实现tab选项卡切换

    本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分  <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre

  • js简单实现竖向tab选项卡的方法

    本文实例讲述了js简单实现竖向tab选项卡的方法.分享给大家供大家参考.具体如下: 选项卡占据左边,而内容放在右边,一个适合新手的竖向的tab选项卡特效例子 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title>

  • JS实现不规则TAB选项卡效果代码

    JS实现不规则TAB选项卡效果代码

    本文实例讲述了JS实现不规则TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款不规则TAB选项卡效果,将中规中矩的方角换成了不规则的圆角,也就是这一换,倒让浏览者新鲜了不少,也使选项卡增多了几份灵感,不是吗? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-box-tab-nav-style-menu-codes/ 具体代码如下: <html> <head> <meta http-equiv="C

  • JS实现同一个网页布局滑动门和TAB选项卡实例

    JS实现同一个网页布局滑动门和TAB选项卡实例

    本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡.分享给大家供大家参考.具体如下: 这里演示同一个网页布局滑动门和TAB选项卡效果,其实滑动门和选项卡没有太大的区别,无非是鼠标动作的不同而已,但是有时候在同一个网页中布局两个以上的选项卡,总容易产生混乱,导致JS出错,如果你需要这样做,那么就请参考本实例,帮你解决这个问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-hd-tab-menu-style-codes/ 具体

  • JS基于面向对象实现的多个倒计时器功能示例

    JS基于面向对象实现的多个倒计时器功能示例

    本文实例讲述了JS基于面向对象实现的多个倒计时器功能.分享给大家供大家参考,具体如下: 运行效果图如下: 实现代码如下: 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • 学习javascript面向对象 实例讲解面向对象选项卡

    学习javascript面向对象 实例讲解面向对象选项卡

    本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下 效果图: 1.功能说明 点击三个按钮分别显示对应的选项卡 2.html代码说明 <div class="box" id="box"> <ul class="list"> <li class="in_active">第一张选项卡</li> <li class="in">

  • jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

    jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

    本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果.分享给大家供大家参考.具体如下: 这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-m

  • JS使用面向对象技术实现的tab选项卡效果示例

    JS使用面向对象技术实现的tab选项卡效果示例

    本文实例讲述了JS使用面向对象技术实现的tab选项卡效果.分享给大家供大家参考,具体如下: 运行效果图如下: 代码如下: html: <ul class="scrollUl"> <li id="m01" class="sd01" value="0"><a href="#" rel="external nofollow" rel="external

  • JS基于面向对象实现的选项卡效果示例

    本文实例讲述了JS基于面向对象实现的选项卡效果.分享给大家供大家参考,具体如下: 中间过渡环节:把面向过程的程序,改写成面向对象的形式 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 input {background:#CCC;} #div1 .active {background:yellow;} #div1 div {width:200px; height:200

  • js实现类似菜单风格的TAB选项卡效果代码

    js实现类似菜单风格的TAB选项卡效果代码

    本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht

随机推荐