本机Javascript实现Tabtab交换函数。

分析个人获取本机元素类名的代码:

复制代码代码如下所示:

getbyclassname:功能(类名、父){

var elem = { },

节点=父级!= undefinedparent。节点类型= = 1parent.getelementsbytagname document.getelementsbytagname(*)(*),

P = new RegExp((^ | S)+类名+(的|美元));

对于(VAR n = 0,I = node.length;n<我;N + +){

如果(p.test(结{ }。className)){

Elem.push(结{ });

}

}

返回元素;

}



父参数是可选的,但必须首先确定它是否存在,并且是DOM元素父节点的节点!= = = 1 undefinedparent。节点类型,节点类型= = 1可以判断Firefox浏览器的DOM节点元素,空白是节点(Childnodes),使用该属性来确定是否DOM元素,删除空格。

删除元素的类名:

复制代码代码如下所示:

无功电流= new RegExp(这匹相对不出众,。'克'); / / this.scur是类的名称,它是由变量如this.scur = 恶狗保存;

这个otab_btn {N}。类名=这。otab_btn { }。classname.replace(狗,);



调用的例子:

复制代码代码如下所示:









文件



体,P,UL,李{填充:0;边距:0;}

列表样式:无;}

h3 {填充:5px;背景颜色:# 999;margin-bottom: 10px;}

预{边界:1px点缀# 000;}

。解释{ padding: 10px;颜色:# 333;线高度:1.6;}

。箱{宽度:300px;身高:100px;边界:# 1px solid ccc;}

。箱UL {身高:30px;线高度:30px;}

。箱ul {浮动:左;显示:内联;宽度:150px;文本对齐:中心;背景颜色:;};}

。box.tab-cur {背景颜色:# 000;颜色:# FFF;}

。盒P {display: none;填充:30px;}

/ * * /塔布

#塔布{宽度:450px;}

。box.tab-cur02 {背景颜色:# 025023;}









使用阅读:

{ 'tabbtn#塔巴:。tab-i ','tabcon ':' #塔巴。tab-c ','cur:'tab-cur} {必须}

tabbtn#塔巴(1):。tab-i ','tabcon ':' #塔巴。tab-c的选择:只支持# id.classname,(ID + +类的名称空间){必须}

小人(2):'tab-cur(默认):用于开关按钮的当前状态(类名){必须}

(3)类型:'mouseover| | 'clicl默认是单击{可选}



塔巴

新的lgy_tab({ 'tabbtn ':' #塔巴tab-i,

tabcon ':' #塔巴tab-c,

我:'tab-cur

});







btn-a

btn-b



Con A

con-b



TabB

新的lgy_tab({ 'tabbtn ':' #塔布tab-i,

tabcon ':' #塔布tab-k,

我:'tab-cur02,

类型:'mouseover

});







btn-a

btn-b

btn-c



Con A

con-b

con-c









新的lgy_tab({ 'tabbtn ':' #塔巴tab-i,

tabcon ':' #塔巴tab-c,

我:'tab-cur

});



新的lgy_tab({ 'tabbtn ':' #塔布tab-i,

tabcon ':' #塔布tab-k,

我:'tab-cur02,

类型:'mouseover

});

测试



新的lgy_tab({ 'tabbtn ':' #塔布tab-j,

tabcon ':' #塔布tab-k,

我:'tab-cur02,

类型:'mouseover

});









js详细代码:

复制代码代码如下所示:

功能lgy_tab(选项){

this.otab_btn = this.getdom(选项。tabbtn); / /点击开关元件

this.otab_clist = this.getdom(选项。tabcon); / /内容交换

如果(this.otab_btn this.otab_clist返回| |!!);

this.scur = option.cur; / /激活

this.type = type'click | |选项;

this.nlen = this.otab_btn.length;

This.int();

}

lgy_tab.prototype = { {

GetId:功能(ID){

返回document.getelementbyid(ID);

},

getbyclassname:功能(类名、父){

var elem = { },

节点=父级!= undefinedparent。节点类型= = 1parent.getelementsbytagname document.getelementsbytagname(*)(*),

P = new RegExp((^ | S)+类名+(的|美元));

对于(VAR n = 0,I = node.length;n<我;N + +){

如果(p.test(结{ }。className)){

Elem.push(结{ });

}

}

返回元素;

},

getdom:函数(){

VaR形式= s.split(''),

P = this.getid(节点名{ 0 }。片(1)),

C = this.getbyclassname(节点名{ 1 }。片(1),P);

如果(P c.length = = 0返回null | |!);

返回C;

},

更改:函数(){

无功电流= new RegExp(这匹相对不出众,'克'。);

对于(n = 0 n<VaR;this.nlen;n + +){

这个otab_clist { } style.display =不关;

这个otab_btn {N}。类名=这。otab_btn { }。classname.replace(狗,);

}

},

Int:函数(){

var =;

这个otab_btn { 0 }。类名=+ this.scur;

这个otab_clist { 0 }。style.display =阻止;

对于(n = 0 n<VaR;this.nlen;n + +){

这个otab_btn {N}。指数= N;

这个otab_btn {N} {开+这类型} =函数(){

That.change();

,otab_btn { }。指数。类名+ =+ that.scur;

,otab_clist { }。指数style.display =阻止;

}

}

}

}





最终结果图显示:



效果不太好,而且兼容性很好,代码非常简单,可以代替庞大的jQuery TAB开关插件。