zoukankan      html  css  js  c++  java
  • DIV做下拉列表

    DIV做下拉列表

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    *{ margin:0px auto; padding:0px}
    #wai{ width:300px; height:300px; margin-top:20px;}
    #sel{ width:210px; height:30px; border:1px solid #666; vertical-align:middle; line-height:30px; padding-left:10px;}
    #items{ width:220px}
    .itema{ width:200px; height:30px; border:1px solid #666; vertical-align:middle; line-height:30px; padding-left:10px; padding-right:10px; border-top:0px solid #666;}
    .itema:hover{ background-color:green; color:#fff; cursor:pointer;}
    </style>
    </head>
    
    <body>
        <div id="wai">
            <div id="sel">请选择</div>
            <div id="items" style=" display:none" sx="0">
                <div class="itema">网站注入</div>
                <div class="itema">SQL攻击</div>
                <div class="itema">DDos攻击</div>
                <div class="itema">渗透</div>
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript">
    var sel = document.getElementById("sel");
    var items = document.getElementById("items");
    sel.onclick = function()
    {
        var sx = parseInt(items.getAttribute("sx"));
        if(sx==1)
        {
            items.style.display = "none";
            sx=0;
            items.setAttribute("sx",sx);
            }else if(sx==0){
        items.style.display = "block";
            sx=1;
            items.setAttribute("sx",sx);
                  }
        }
    var itema = document.getElementsByClassName("itema");
    for(var i=0;i<itema.length;i++)
    {
        itema[i].onclick = function()
        {
        
            items.style.display = "none";
             sel.innerText = this.innerText;
            
            
            }
        }
    </script>

    效果图:

  • 相关阅读:
    简单计算器--hdu1237(栈的运用)
    Bone Collector
    Red and Black---hdu1312(dfs)
    RTMP规范简单分析
    FFMPEG中最关键的结构体之间的关系
    面向对象与形而上学
    洛谷 P2913 [USACO08OCT]车轮旋转Wheel Rotation
    洛谷 P1889 士兵站队
    洛谷 P1885 Moo
    洛谷 P1683 入门
  • 原文地址:https://www.cnblogs.com/Whitehat/p/8023745.html
Copyright © 2011-2022 走看看