zoukankan      html  css  js  c++  java
  • js简单的下拉选中效果

    css样式:

    *{ margin:0px auto; padding:0px}
    #xiala{ width:180px; height:33px; border:1px solid #999;text-align:center; line-height:33px; vertical-align:middle; }
    #xiala:hover{ cursor:pointer}
    
    #zi{width:180px; height:150px; border:1px solid #63C; border-top:0px; display:none}
    
    .list{width:180px; height:33px; text-align:center; line-height:33px; vertical-align:middle; border-bottom:1px solid #63C; background-color:#CCC}
    .list:hover{ cursor:pointer; background-color:#63C; color:white}

    html代码:

    <div style="700px; height:500px; margin-top:30px">
    
        <div id="xiala" onclick="Show()"></div>    
        <div id="zi">
            <div class="list" onclick="Xuan(this)">山东</div>
            <div class="list" onclick="Xuan(this)">淄博</div>
            <div class="list" onclick="Xuan(this)">张店</div>
        </div>
    </div>

    JS代码:

    function Show()
    {
        document.getElementById("zi").style.display="block";
    }
    function Xuan(ys)
    {
        var v = ys.innerText;
        
        document.getElementById("xiala").innerText = v;
        
        document.getElementById("zi").style.display="none";
    }
  • 相关阅读:
    JS和Jquery获取this
    写SQL经验积累2
    转载学习
    java开发3个月总结
    学习规划
    Spring Boot详解
    webSocketDemo
    spring boot中 redis配置类(4.0)
    c语言操作字符串
    聊聊面试常问的HashMap中红黑树
  • 原文地址:https://www.cnblogs.com/UC0079/p/6412206.html
Copyright © 2011-2022 走看看