zoukankan      html  css  js  c++  java
  • 学习一个输入框提示列表效果

    学习一个输入框提示列表效果记录下

    主要要点:li列背景换行变色

    .Menu2 ul{margin:0;padding:0}
    .Menu2 ul li
    {width:100%;height:25px;line-height:25px;text-indent:15px;
                 border-bottom
    :1px dashed #ccc;color:#666;cursor:pointer;
     change
    :expression(
      this.onmouseover=function(){
        this.style.background="#F2F5EF"
    ;
      
    },
      this.onmouseout=function()
    {
        this.style.background="";
      
    }
     )
    }

    主要js代码

    <script type="text/javascript">
    function showAndHid(obj,types)
    {
      
    var Layer=window.document.getElementById()
    }
      
    function showAndHide(obj,types){
        
    var Layer=window.document.getElementById(obj);
        
    switch(types){
      
    case "show":
        Layer.style.display
    ="block";
      
    break;
      
    case "hide":
        Layer.style.display
    ="none";
      
    break;
    }
      }
      
    function getValue(obj,str){
        
    var input=window.document.getElementById(obj);
    input.value
    =str;
      }
    </script>

    body里调用

    <div> Location:<input type="text" id="txt" name="txt" onfocus="showAndHide('List1','show');" onblur="showAndHide('List1','hide');"></div>
       
    <!--列表1-->
       
    <div class="Menu" id="List1">
      
    <div class="Menu2">
        
    <ul>
      
    <li onmousedown="getValue('txt','中国CHINA');showAndHide('List1','hide');">中国CHINA</li>
      
    <li onmousedown="getValue('txt','美国USA');showAndHide('List1','hide');">美国USA</li>
    </ul>
      
    </div>
       
    </div>

    全部例子代码:下载 

  • 相关阅读:
    程序员面试笔试——链表题目总结分析
    Java实现约瑟夫环
    Java关键字final、static
    test
    Blog 转移
    kali 国内镜像源,以及PD_tools,Vm_tools的安装
    Ubuntu 安装启动Tomcat
    JDK 安装环境配置(ubuntu)
    Python 正则表达式
    Python MySQLdb Mac安装遇到的问题
  • 原文地址:https://www.cnblogs.com/sendling/p/1372191.html
Copyright © 2011-2022 走看看