zoukankan      html  css  js  c++  java
  • js实例3下拉列表

    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #xiala{ 200px; height:40px; border:1px solid #999;text-align:center; line-height:40px; vertical-align:middle;}
    #xiala:hover{ cursor:pointer}
    .list{ 200px; height:40px; text-align:center; line-height:40px; vertical-align:middle; border:1px solid #999; border-top-0px; display:none}
    .list:hover{ cursor:pointer; background-color:#63C; color:white;}
    </style>
    </head>

    <body>
    <br />
    <div style="500px; height:500px;">

    <div id="xiala" onclick="showa()"></div>
    <div class="list" onclick="xuan(this)">山东</div>
    <div class="list" onclick="xuan(this)">北京</div>
    <div class="list" onclick="xuan(this)">上海</div>
    <div class="list" onclick="xuan(this)">深圳</div>
    <div class="list" onclick="xuan(this)">广州</div>

    </div>
    <script type="text/javascript">
    function showa()
    {
    var list = document.getElementsByClassName("list");
    for(var i=0; i<list.length;i++)
    {
    list[i].style.display = "block";
    }
    }

    function xuan(a)
    {
    var nr = a.innerHTML;
    document.getElementById("xiala").innerHTML=nr;

    var list = document.getElementsByClassName("list");
    for(var i=0; i<list.length;i++)
    {
    list[i].style.display = "none";
    }
    }
    </script>

  • 相关阅读:
    java基础测试
    java随笔
    Android 开机广播的使用
    ZOJ 3715 Kindergarten Election
    LightOJ 1051
    LightOJ 1042
    LightOJ 1049
    LightOJ 1048
    LeightOJ 1046
    LightOJ 1045
  • 原文地址:https://www.cnblogs.com/qdlj/p/6188279.html
Copyright © 2011-2022 走看看