zoukankan      html  css  js  c++  java
  • 用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 <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>

  • 相关阅读:
    发现维护的自己编写linux 系统检查脚本一个bug (syslog\message)
    循环while for
    字面量(常量)和变量的区别
    网页配色方法
    Dedecms v5.7 CKEditor编辑器回车键换行改为分段
    JS控制密码框获取焦点时文字消失,失去焦点时文字出现
    JS实现选项卡
    JS实现全选、不选、反选
    JS点击显示隐藏内容
    ASP连接MSSQL代码
  • 原文地址:https://www.cnblogs.com/zym0m/p/7050867.html
Copyright © 2011-2022 走看看