• javaScript基础练习题-下拉框制作


    1.基础回顾

    如何让一个段javascript在文档加载后执行,(因为自己忘了,所以顺便复习一下)

    window.onload = function(){};

    <!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; padding:0px;}
     #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
     ul{ list-style:none;}
     ul li{ line-height:40px; text-align:center; position:relative; float:left;}
     a{ text-decoration:none; color:#000; display:block; width:90px;}
     a:hover{ color:#FFF; background-color:#666;}
     ul li ul li{ float:none;margin-top:2px; background-color:#eee; } 
     ul li ul{width:90px; position:absolute;  left: 0px;top: 40px; display: none}
    /** ?*/
    /**ul li:hover ul{display: block}*/
    </style>
    <script type="text/javascript" >
        window.onload = function(){
            alert("load ok");
        }
        function optionShow(li) {
            var submenu = li.getElementsByTagName("ul")[0];
            submenu.style.display = "block";
        }
        function optionHide(li) {
            var submenu = li.getElementsByTagName("ul")[0];
            submenu.style.display = "none";
        }
    
    </script>
    </head>
    
    <body>
    <div id="menu">
    <ul>
      <li id="sy"><a href="#">首页</a></li>
      <li id="kcdt"><a href="#">课程大厅</a>
        
       <!-- ?-->
        <ul>
            <li><a href="#">JavScript</a></li>
            <li><a href="#">JQuery</a></li>
        </ul>
      </li>
      <li onmouseover="optionShow(this);" onmouseout="optionHide(this);"><a href="#">学习中心</a>
        <ul>
          <li><a href="#">视频学习</a></li>
          <li><a href="#">案例学习</a></li>
          <li><a href="#">交流平台</a></li>
        </ul>
      </li>
      <li><a href="#">经典案例</a></li>
      <li><a href="#">关于我们</a></li>
    </ul>
    </div> 
    </body>
    </html>
  • 相关阅读:
    0625jQuery练习:权限基础1:查询员工对应角色、修改员工对应角色
    0624jQuery练习:三级联动—时间
    0622jQuery基础:常用属性
    0621jQuery基础:基础属性
    0621jQuery练习:三级联动
    0621jQuery练习:弹窗
    0621jQuery基础:事件
    数据库连接-登录
    javaScript中的DOM操作及数组的使用
    设置日期对象(年-月-日 时-分-秒)实现菱形的拼接
  • 原文地址:https://www.cnblogs.com/rocky-AGE-24/p/5023786.html
Copyright © 2020-2023  润新知