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="width:80px; height:25px; float:left;background-color:#309;" onclick="showa('gongda')">工大要闻</div>
20 <div id="a" style="width:80px; height:25px; float:left;background-color:#F03;" onclick="showa('meiti')">媒体工大</div>
21 <div id="a" style="width: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>
