您好,欢迎访问一九零五行业门户网

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

分析个人用原生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                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,'');
调用例子:
复制代码 代码如下:
document
使用阅读 :
{'tabbtn':'#taba .tab-i','tabcon':'#taba .tab-c','cur':'tab-cur'} 【必选】
(1)'tabbtn':'#taba .tab-i','tabcon':'#taba .tab-c'选择器:只支持 #id .classname,(id + 空格 + 类名) 【必选】
(2)'cur':'tab-cur'(默认) :为切换按钮当前状态(类名)【必选】
(3)'type':'mouseover'|| 'clicl' 默认是点击 【可选】
taba
     new lgy_tab({'tabbtn':'#taba .tab-i',
    'tabcon':'#taba .tab-c',
    'cur':'tab-cur'
    });
        
btn-a
            btn-b
con-a
con-b
tabb
     new lgy_tab({'tabbtn':'#tabb .tab-i',
    'tabcon':'#tabb .tab-k',
    'cur':'tab-cur02',
    'type':'mouseover'
    });
        
btn-a
            btn-b
            btn-c
con-a
con-b
con-c
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            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.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.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选项卡切换插件了。
其它类似信息

推荐信息