1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>无标题文档</title> 5 <style type="text/css"> 6 *{margin:0px auto; padding:0px;} 7 #xuanxiangka{ width:434px; height:26px;text-align:center; line-height:26px; vertical-align:middle;} 8 .xuanxiang{ width:434px; height:230px; display:none;} 9 #a:hover{cursor:pointer;} 10 #gongda{display:block; background-color:#309;} 11 #meiti{background-color:#F03;} 12 #ligong{background-color:#0F3;} 13 14 </style> 15 </head> 16 17 <body> 18 <div id="xuanxiangka"> 19 <div id="a" style="80px; height:25px; float:left;background-color:#309;" onclick="showa('gongda')">工大要闻</div> 20 <div id="a" style="80px; height:25px; float:left;background-color:#F03;" onclick="showa('meiti')">媒体工大</div> 21 <div id="a" style="80px; height:25px; float:left;background-color:#0F3;" onclick="showa('ligong')">理工大学</div> 22 </div> 23 <div id="gongda" class="xuanxiang"></div> 24 <div id="meiti" class="xuanxiang"></div> 25 <div id="ligong" class="xuanxiang"></div> 26 27 28 <script type="text/javascript"> 29 function showa(d) 30 { 31 var div=document.getElementById(d); 32 var xuanxiang=document.getElementsByClassName("xuanxiang"); 33 for(var i=0;i<xuanxiang.length;i++) 34 { 35 xuanxiang[i].style.display="none"; 36 } 37 div.style.display="block"; 38 } 39 40 </script> 41 </body>
