Heim > Web-Frontend > HTML-Tutorial > 肯求各路神仙为什么鼠标滑过不变色呀~_html/css_WEB-ITnose

肯求各路神仙为什么鼠标滑过不变色呀~_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:09:35
Original
1340 Leute haben es durchsucht

html代码:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script></script>
<script> <br /> window.onload=function(){ <br /> var arr1=document.getElementById("ch_tab").getElementsByTagName("li"); <br /> var arr2=document.getElementById("ch_tab_content"); <br /> arr3=getids(arr2,"tab_contents","div"); <br /> <br /> for(i=0;i<arr1.length;i++){ <br /> arr1[i].index=i; <br /> arr1[i].onmouseover=function(){ <br /> for(i=0;i<arr1.length;i++){ <br /> arr1[i].className=""; <br /> arr3[i].style.display="none"; <br /> } <br /> arr3[this.index].style.display="block"; <br /> this.className="active"; <br /> <br /> } <br /> } <br /> function getids(a,b,c){ <br /> var arr1=a.getElementsByTagName("div"); <br /> var arr=[]; <br /> for(i=0;i<arr1.length;i++){ <br /> if(arr1[i].className==b){ <br /> arr.push(arr1[i]); //把选出来的对象放在数组中 <br /> } <br /> } <br /> return arr; <br /> } <br /> } <br /> </script>










  • 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;
}
++
正解.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage