通过一个 html 页面简单的实现了菜单功能。但是实际开发当中,如果菜单栏有很多项,频繁的修改 HTML,会很繁琐,也容易出错。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
改进版本优化了这个问题,通过简单的 Javascript 代码就可以增加菜单。同时使得 HTML 页面非常简洁,只需要写 2 行代码即可!O(∩_∩)O
1. 使用前提,在 HTML 页面中引入一个 CSS 文件,和一个 JavaScript 文件。如下:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <TITLE>
- Menu
- </TITLE>
- <link type="text/css" rel="stylesheet" href="menu.css">
- </HEAD>
- <BODY>
- <div>
- <script src="menu.js">
- </script>
- </div>
- </BODY>
- </HTML>
引入 CSS 文件:
,menu.css 代码见后 引入 JavaScript 文件:
2. 定义菜单代码如下: 说明: 1) var root = new Root(); root.toString(); 固定格式 2)声明菜单: var m1 = new Menu("File","alert(this.innerText);"); 菜单显示的名称为"File",onclick 事件为 alert(this.innerText); root.add(m1); 第一级菜单(即页面初始显示的菜单)放到 root 之下,通过 add() 方法 var m11 = new MenuItem("New""); m1.add(m11); 声明 "File" 的子菜单 "New" m1.add(new MenuItem("Open","alert('open file');")); 声明 "File" 的子菜单 "Open" 通过上面的代码即可完成菜单的添加功能。 代码文件: <1> menu.css <2>menu.js
来源: