用div做下拉列表

最新推荐文章于 2022-05-21 10:50:42 发布

weixin_30736301

最新推荐文章于 2022-05-21 10:50:42 发布

阅读量110

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/zym0m/p/7050867.html

版权

 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 #sel{width:280px;height:40px;border:1px solid #c0f;margin-top:100px;line-height:40px;vertical-align:middle;padding-left:20px;}
 8 #list{width:300px;height:200px;border-left:1px solid #c0f;border-right:1px solid #c0f;}
 9 .item{width:280px;height:39px;border-bottom:1px solid #c0f;line-height:40px;vertical-align:middle;padding-left:20px;}
10 </style>
11 </head>
12 
13 <body>
14 <div id="sel"></div>
15 <div id="list" style="display:none">
16     <div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">北京</div>
17     <div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">上海</div>
18     <div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">广州</div>
19     <div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">深圳</div>
20     <div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">重庆</div>
21     
22 </div>
23 </body>
24 <script type="text/javascript">
25 function xz(a){
26     var sy=document.getElementsByClassName("item");
27     for(var i=0;i<sy.length;i++){
28         sy[i].style.backgroundColor="white";
29         sy[i].style.color="black";
30     }
31     a.style.backgroundColor ="#ccc";
32     a.style.color="white";
33 }
34 
35 var sel=document.getElementById("sel");
36 sel.onclick =function(){
37     var c=document.getElementById("list");
38     if(c.style.display=="none"){
39         c.style.display="block";
40     }else{
41         c.style.display="none";
42     }
43 }
44 
45 function xuanzhong(a){
46     document.getElementById("list").style.display="none";
47     document.getElementById("sel").innerText =a.innerText;
48 }
49 </script>
50 </html>

转载于:https://www.cnblogs.com/zym0m/p/7050867.html

weixin_30736301

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用div做下拉列表

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 <sty...
复制链接

扫一扫