本机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开关插件。