javascript通过获取html标签属性class实现多选项卡的方法
本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>原生javascript通过获取html标签属性class实现多选项卡</title>
<styletype="text/css">
.tab{
clear:both;
margin:20pxauto;
padding:10px;
width:680px;
overflow:hidden;
}
.tab.tab-menu{
margin:0;
padding:0;
list-style:none;
}
.tab.tab-menuli{
display:inline;
margin:02px00;
}
.tab.tab-menulia{
padding:01em;
text-decoration:none;
color:#a80;
background:#fe5;
}
.tab.tab-menulia:hover{
background:#fc0;
color:#540;
}
.tab.tab-menu.active{
}
.tab.tab-menu.activea{
padding-bottom:2px;
font-weight:bold;
color:black;
background:#fc0;
}
.tab.tab-panel{
padding:1em;
border:2pxsolid#fc0;
background:#fff;
}
.tab.tab-panelh2{
font-size:1.5em;
color:#fc0;
}
.tab.tab-none{
display:none;
}
</style>
<scripttype="text/javascript">
functionTab(style,scope){
this.oItem=this.getByClass(style,scope);
this.init();
}
Tab.prototype={
init:function(){
varthat=this,menu,m;
for(vari=0,len=this.oItem.length;i<len;i++){
menu=this.oItem[i].getElementsByTagName('li');
for(varj=0,mLen=menu.length;j<mLen;j++){
m=menu[j];
m.index=j;
m.onmouseover=function(){that.focus(this);}
}
}
},
focus:function(o){
varpar=o.parentNode.parentNode,panel=par.getElementsByTagName('div'),
btn=par.getElementsByTagName('li'),len=btn.length;
for(vari=0;i<len;i++){
btn[i].className='';
panel[i].className=this.changeClass(panel[i].className,'tab-none',true);
}
o.className='active';
panel[o.index].className=this.changeClass(panel[o.index].className,'tab-none',false);
},
changeClass:function(cl,cl2,add){
varflag;
if(cl.match(cl2)!=null)flag=true;
if(add^flag)returnflag?cl.replace(cl2,''):cl+=''+cl2;
returncl;
},
getByClass:function(cla,obj){
varobj=obj||document,arr=[];
if(document.getElementsByClassName){
returndocument.getElementsByClassName(cla);
}else{
varall=obj.getElementsByTagName('*');
for(vari=0,len=all.length;i<len;i++){
if(all[i].className.match(cla)!=null)arr.push(all[i]);
}
returnarr;
}
}
}
window.onload=function(){
newTab('tab-menu',null);
}
</script>
</head>
<body>
<divclass="tab">
<ulclass="tab-menu">
<liclass="active"><ahref="">111</a></li>
<li><ahref="">122</a></li>
<li><ahref="">133</a></li>
</ul>
<divclass="tab-panel">
111
</div>
<divclass="tab-paneltab-none">
122
</div>
<divclass="tab-paneltab-none">
133
</div>
</div>
<divclass="tab">
<ulclass="tab-menu">
<liclass="active"><ahref="">211</a></li>
<li><ahref="">222</a></li>
<li><ahref="">233</a></li>
</ul>
<divclass="tab-panel">
211
</div>
<divclass="tab-paneltab-none">
222
</div>
<divclass="tab-paneltab-none">
233
</div>
</div>
<divclass="tab">
<ulclass="tab-menu">
<liclass="active"><ahref="">311</a></li>
<li><ahref="">322</a></li>
<li><ahref="">333</a></li>
</ul>
<divclass="tab-panel">
311
</div>
<divclass="tab-paneltab-none">
322
</div>
<divclass="tab-paneltab-none">
333
</div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。