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 #xiala{
8 width:200px;
9 height:40px;
10 border:1px solid #036;
11 text-align:center;
12 line-height:40px;
13 vertical-align:middle;}
14 #xiala:hover{ cursor:pointer}
15 .list{
16 width:200px;
17 height:40px;
18 text-align:center;
19 line-height:40px;
20 vertical-align:middle;
21 border:1px solid #306;
22 border-top-width:0px;
23 display:none;}
24 .list:hover{
25 background-color:#60F;
26 color:#fff;}
27
28 </style>
29 </head>
30
31 <body>
32
33 <div style="width:500px; height:500px;">
34 <div id="xiala" onclick="xianshi()"></div>
35 <div class="list" onclick="xuanze(this)">11</div>
36 <div class="list" onclick="xuanze(this)">22</div>
37 <div class="list" onclick="xuanze(this)">33</div>
38 <div class="list" onclick="xuanze(this)">44</div>
39 <div class="list" onclick="xuanze(this)">55</div>
40 </div>
41 </body>
42 <script type="text/javascript">
43 function xianshi()
44 {
45 var list = document.getElementsByClassName("list");
46 for( var i=0;i<list.length;i++)
47 {
48 list[i].style.display="block";
49 }
50
51 }
52
53 function xuanze(a)
54 {
55 var nr=a.innerHTML;
56 document.getElementById("xiala").innerHTML=nr;
57
58 var list = document.getElementsByClassName("list");
59 for( var i=0;i<list.length;i++)
60 {
61 list[i].style.display="none";
62 }
63 }
64 </script>
65 </html>
如图
1图
2图
3图
