先期步骤，先用css实现布局，效果如下所示：
body{ font-size:12px; } .div1{ width:126px; height:156px; /* background-color:pink; */ } .navi{ width:21px; height:156px; /* background-color:silver; */ /*background-color:black;*/ float:left; } .navi ul{ margin-top:0px; /* ul一直向下离上边框有几十个像素，想了很久才知道在这里改。 */ padding:0px; margin-left:0px; float:left; } .navi li{ list-style-type:none; width:21px; height:42px; margin-top:2px; float:left; text-align:center; padding-top:8px; /* 这里margin-top不好使 */ background-color:silver; } .zs,.rz,.cg{ margin-top:2px; margin-bottom:2px; width:100px; height:152px; /*background-color:silver;*/ margin-left:4px; float:left; } .zs ul,.rz ul,.cg ul{ padding:0px; margin-top:0px; margin-left:0px; float:left; /* background-color:red; */ height:156px; } .zs ul li,.rz ul li,.cg ul li{ width:100px; list-style-type:none; line-height:19px; float:left; } .rz,.cg{ /* visibility:hidden; */ /* visibility有可能占用空间，不能按照预定位置显示 */ display:none; /*visibility和display是有区别的。*/ }
在鼠标移动到响应的模块时触发事件。
onmouseover="change('zs',this)"
显示不同的信息时改变display属性值即可。
zs.style.display="none"; rz.style.display="block"; cg.style.display="none";
代码如下所示：
<!DOCTYPE HTML> <html lang="en"> <head> <link href="sohudiv.css" type="text/css" rel="styleSheet"/> <script language="javascript" type="text/javascript"> <!-- function change(val,obj){ obj.style.backgroundColor="#FFC12D"; if(val=='zs'){ //window.alert("ok"); /*zs.style.visibility="visible"; rz.style.visibility="hidden";*/ /*zs.style.backgroundColor="#FFC12D";*/ zs.style.display="block"; rz.style.display="none"; cg.style.display="none"; }else if(val=='rz'){ //window.alert("ok"); /*zs.style.visibility="hidden"; rz.style.visibility="visible";*/ //用上面的方法是行不通的 /*rz.style.backgroundColor="#FFC12D";*/ zs.style.display="none"; rz.style.display="block"; cg.style.display="none"; }else if(val=='cg'){ zs.style.display="none"; rz.style.display="none"; cg.style.display="block"; } } function change2(obj){ obj.style.backgroundColor="silver"; } //--> </script> </head> <body> <div class="div1"> <div class="navi"> <ul> <li onmouseover="change('zs',this)" onmouseout="change2(this)">招生</li> <li onmouseover="change('rz',this)" onmouseout="change2(this)">热招</li> <li onmouseover="change('cg',this)" onmouseout="change2(this)">出国</li> </ul> <!-- 超链接div --> </div> <div class="zs" id="zs"> <ul> <li><a href="#">招生招生招生招生</a></li> <li><a href="#">招生招生招生招生</a></li> <li><a href="#">招生招生招生招生</a></li> <li><a href="#">招生招生招生招生</a></li> <li><a href="#">招生招生招生招生</a></li> <li><a href="#">招生招生招生招生</a></li> <li><a href="#">招生招生招生招生</a></li> <li><a href="#">招生招生招生招生</a></li> </ul> </div> <div class="rz" id="rz"> <ul> <li><a href="#">热招热招热招热招</a></li> <li><a href="#">热招热招热招热招</a></li> <li><a href="#">热招热招热招热招</a></li> <li><a href="#">热招热招热招热招</a></li> <li><a href="#">热招热招热招热招</a></li> <li><a href="#">热招热招热招热招</a></li> <li><a href="#">热招热招热招热招</a></li> <li><a href="#">热招热招热招热招</a></li> </ul> </div> <div class="cg" id="cg"> <ul> <li><a href="#">出国出国出国出国</a></li> <li><a href="#">出国出国出国出国</a></li> <li><a href="#">出国出国出国出国</a></li> <li><a href="#">出国出国出国出国</a></li> <li><a href="#">出国出国出国出国</a></li> <li><a href="#">出国出国出国出国</a></li> <li><a href="#">出国出国出国出国</a></li> <li><a href="#">出国出国出国出国</a></li> </ul> </div> </div> </body> </html>
练习：
收缩：
展开：
这里是障眼法。
实现代码如下所示：
<!DOCTYPE HTML> <html> <head> <script language="javascript" type="text/javascript"> function test1_onclick(){ if(test1.innerText=="+"){ //window.alert("ok"); //window.alert(test1.innerText); test1.innerText="-"; myList.style.display="block"; }else if(test1.innerText=="-"){ //window.alert("ok"); test1.innerText="+"; //test1.innerText="+";不要写成test1.innerText=="+"; myList.style.display="none"; //myList.style.display="none";不要写成myList.display="none"了; } } </script> <title>Document</title> </head> <body> <p><span id="test1" onclick="test1_onclick()" style="border:3px solid red" >+</span>myFamily</p> <ul id="myList" style="display:none"> <li>爸爸</li> <li>妈妈</li> <li>弟弟</li> </ul> </body> </html>