html代码:
window.onload=function(){
var arr1=document.getElementById("ch_tab").getElementsByTagName("li");
var arr2=document.getElementById("ch_tab_content");
arr3=getids(arr2,"tab_contents","div");
for(i=0;i arr1[i].index=i;
arr1[i].onmouseover=function(){
for(i=0;i arr1[i].className="";
arr3[i].style.display="none";
}
arr3[this.index].style.display="block";
this.className="active";
}
}
function getids(a,b,c){
var arr1=a.getElementsByTagName("div");
var arr=[];
for(i=0;i if(arr1[i].className==b){
arr.push(arr1[i]); //把选出来的对象放在数组中
}
}
return arr;
}
}
aaaa bbbb cccc dddd 1111
2222
3333
4444
CSS代码:
.tab_main{
width:600px;
height:400px;
border:1px solid gray;
}
/*tab标签*/
#ch_tab{
}
.ch_ul_tab{
width:560px;
height:26px;
border-bottom:1px solid gray;
}
.ch_ul_tab li{
width:70px;
height:25px;
float:left;
list-style:none;
margin-left:20px;
text-align:center;
background:green;
border-top:1px solid gray;
border-left:1px solid gray;
border-right:1px solid gray;
}
/*tab标签内容*/
#ch_tab_content{
clear:both;
width:600px;
height:364px;
}
.active{
background:yellow;
border-bottom:1px solid white;
}
回复讨论(解决方案)
我想把TAB标签的绿色变成黄色呀
在这个样式中:
.ch_ul_tab li{
width:70px;
height:25px;
float:left;
list-style:none;
margin-left:20px;
text-align:center;
background:green;
border-top:1px solid gray;
border-left:1px solid gray;
border-right:1px solid gray;
}
把background:green;去掉， 可以简单的换色（好象就是在上面的样式中加了一句background:yellow;） 但逻辑不对呀！
.ch_ul_tab li.active{
background:yellow;
border-bottom:1px solid white;
}
.ch_ul_tab li.active{
background:yellow;
border-bottom:1px solid white;
}
++
正解.
