这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 实现下拉菜单的显示和隐藏的相关资料, 需要的朋友可以参考下
我们这一篇来用 JavaScript 脚本实现下拉菜单的显示和隐藏。使用 JavaScript 方法实现我们需要用的知识有: 1)JS 事件:onmouseover 鼠标经过事件和 onmouseout 鼠标离开事件。 2)JS 基础语法:使用 function 关键字定义函数。 3)DOM 编程:getElementsByTagName() 方法。 那么接下来就是我们制作的流程: 1) 隐藏二级菜单:设置 CSS 样式, 让二级菜单隐藏。 2) 编写显示子菜单 showsub() 函数:使用 getElementsByTagName 获取二级菜单项;通过 style.display 设置二级菜单显示。 3) 编写隐藏子菜单 hidesub() 函数:使用 getElementsByTagName 获取二级菜单项;通过 style.display 设置二级菜单隐藏。 4) 添加鼠标事件:给有二级菜单的一级菜单添加鼠标事件, 并调用 showsub()/hidesub() 函数,实现鼠标经过一级菜单,二级菜单显示和隐藏。 5) 做浏览器兼容性检测,至少五个浏览器。IE7,8,9,火狐,谷歌,2345 浏览器等。
效果图:
html 代码:
- <span style="font-size:18px;">
- <!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=gb2312" />
- <title>
- 下拉菜单
- </title>
- <!--引入的外部CSS样式文件-->
- <link rel="stylesheet" type="text/css" href="style.css" />
- <!--引入的外部JS脚本文件-->
- <script type="text/javascript" src="script.js">
- </script>
- </head>
- <body>
- <div id="nav" class="nav">
- <ul>
- <li>
- <a href="#">
- 网站首页
- </a>
- </li>
- <li onmouseover="showsub(this)" onmouseout="hidesub(this)">
- <a href="#">
- 课程大厅
- </a>
- <ul>
- <li>
- <a href="#">
- JavaScript
- </a>
- </li>
- <li>
- <a href="#">
- jQuery
- </a>
- </li>
- <li>
- <a href="#">
- Ajax
- </a>
- </li>
- </ul>
- </li>
- <li onmouseover="showsub(this)" onmouseout="hidesub(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>
- </span>
外部 CSS 样式表 style.css 文件代码:
- <span style="font-size:18px;">/*CSS全局设置*/
- *{
- margin:0;
- padding:0;
- }
- .nav{
- background-color:#EEEEEE;
- height:40px;
- width:450px;
- margin:0 auto;
- }
- ul{
- list-style:none;
- }
- ul li{
- float:left;
- line-height:40px;
- text-align:center;
- }
- a{
- text-decoration:none;
- color:#000000;
- display:block;
- width:90px;
- height:40px;
- }
- a:hover{
- background-color:#666666;
- color:#FFFFFF;
- }
- ul li ul li{
- float:none;
- background-color:#EEEEEE;
- }
- ul li ul{
- display:none;
- }
- /*为了兼容IE7设置的CSS样式,但是又必须写在a:hover前面*/
- ul li ul li a:link,ul li ul li a:visited{
- background-color:#EEEEEE;
- }
- ul li ul li a:hover{
- background-color:#009933;
- }
- </span>
外部 JS 脚本 script.js 文件代码:
- <span style="font-size:18px;">function showsub(li){
- var submenu=li.getElementsByTagName("ul")[0];
- submenu.style.display="block";
- }
- function hidesub(li){
- var submenu=li.getElementsByTagName("ul")[0];
- submenu.style.display="none";
- }</span>
来源: http://www.phperz.com/article/17/0408/267744.html