zoukankan      html  css  js  c++  java
  • js相关小实例——div实现下拉菜单

    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{ margin:0px auto; padding:0px }
    #xianshi{ 130px; height:30px; border:1px solid #666; margin-left:400px; text-align:center; vertical-align:middle; line-height:30px; margin-top:50px}
    #xianshi:hover{ cursor:pointer}
    .xiang{ 130px; height:30px; border:1px solid #666; text-align:center; margin-left:400px; line-height:30px; vertical-align:middle}
    .xiang:hover{ cursor:pointer; background-color:#93F}
    </style>
    </head>

    <body>
    <div>
    <div id="xianshi" onclick="xian()"></div>
    <div class="xiang" style=" display:none" onclick="huan(this)">111111111</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">222222222</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">333333333</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">444444444</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">555555555</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">666666666</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">777777777</div>

    </div>
    </body>
    <script type="text/javascript">
    function xian()
    {
      var s = document.getElementsByClassName("xiang")
      var a = document.getElementById("xianshi")
      var nr = a.innerHTML
      var nr1 = s.innerHTML

      for(i=0;i<s.length;i++)
      {
        if(s[i].style.display == "none")
        {
          s[i].style.display = "block"
          if(s[i].innerHTML == nr)
          {
            s[i].style.display = "none"
          }

        }
        else
        {
          s[i].style.display = "none"
        }
      }
    }


    function huan(a)
    {
      var nr = a.innerHTML
      document.getElementById("xianshi").innerHTML = nr
      var s = document.getElementsByClassName("xiang")
      for(i=0;i<s.length;i++)
      {
        s[i].style.display = "none"
      }
    }

    </script>
    </html>

    运行结果如下:

  • 相关阅读:
    python for selenium 数据驱动测试
    iframe 处理
    百度登录、退出示例
    js弹框处理
    window.alert弹出处理
    通过网页内容识别和处理弹出窗口
    通过识别标题处理弹出窗口
    通过名称识别和处理弹出窗口
    发现github官网进不去了
    开发环境的搭建-记录一下
  • 原文地址:https://www.cnblogs.com/binbinyouli123/p/6534681.html
Copyright © 2011-2022 走看看