JS+DIV实现鼠标划过切换层效果的示例代码
发布时间：2023-08-02 15:05:56 所属栏目：教程 来源：
导读：<style>
/*栏目切换样式开始*/
.none {display: none;}
.block {display: block;}
/*头部样式*/
.s_c {width:800px;text-align: center;}
.s_c ul{clear:both;margin:0;}
.s_c li{list-
/*栏目切换样式开始*/
.none {display: none;}
.block {display: block;}
/*头部样式*/
.s_c {width:800px;text-align: center;}
.s_c ul{clear:both;margin:0;}
.s_c li{list-
|
<style> /*栏目切换样式开始*/ .none {display: none;} .block {display: block;} /*头部样式*/ .s_c {width:800px;text-align: center;} .s_c ul{clear:both;margin:0;} .s_c li{list-style:none;float:left;position: relative;width: 70px;} /**/ .c_0 {background-color: #CCCCCC;} /*隐藏状态*/ .c_1 {background-color: #0000CC;} /*显示状态*/ /**/ .s_b{ border:1px solid #666; height: 160px; width: 440px; } /**/ /*栏目切换样式结束*/ </style> <script language="javascript"> function aa(s_id){ for(i=1;i<7;i++){ if(i==s_id){ document.getElementById("s"+i).className="block"; //内容的样式 document.getElementById("m"+i).className="c_"+i+" c_1"; //头部的样式 //document.getElementById("uid_"+i).focus(); } else { document.getElementById("s"+i).className="none"; //内容不显示 document.getElementById("m"+i).className="c_0"; // } } } </script> <div > <ul> <li><div id="m1" ><a href="#" onmouseover="aa(1)">分类一</a></div></li> <li><div id="m2" ><a href="#" onmouseover="aa(2)">分类二</a></div></li> <li><div id="m3" ><a href="#" onmouseover="aa(3)">分类三</a></div></li> <li><div id="m4" ><a href="#" onmouseover="aa(4)">分类四</a></div></li> <li><div id="m5" ><a href="#" onmouseover="aa(5)">分类五</a></div></li> <li><div id="m6" ><a href="#" onmouseover="aa(6)">分类六</a></div></li> </ul> </div> <div > <div id="s1"> <div>第一部分</div> </div> <div id="s2"> <div >第二部分</div> </div> <div id="s3"> <div >第三部分</div> </div> <div id="s4"> <div >第四部分</div> </div> <div id="s5"> <div >第五部分</div> </div> <div id="s6"> <div >第六部分</div> </div> </div> （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
