选项卡 

 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>

 

 

posted @ 2016-12-14 18:18  黄力军  阅读(143)  评论(0)    收藏  举报