在这里，我们不是在谈论DHTML下拉/下拉菜单。在这里，我们正在谈论使用JavaScript的简单导航菜单。它标识了活动页面，因此显示与其他链接不同的链接，从而使用户易于导航。在这里，我们将使用一个.js文件，该文件将用于导航菜单下的所有页面。因此，您无需更新所有页面：您只需更新一个JavaScript库文件（.js文件）。例如，考虑以下3个导航链接：
链接1处于活动状态。
链接2处于活动状态。
链接3处于活动状态。如您所见，这些是导航菜单在不同页面上如何显示的镜头，具体取决于链接的活动。这些菜单由一个JavaScript文件生成。可以通过定义菜单的类（例如.links）并为.links：active分配不同的属性，从而仅使用级联样式表（CSS）创建这样的菜单。因此，您只需使用CSS文件创建菜单即可。尽管这是完美的，但是在这里使用JavaScript有一个优势。正如您在上面的镜头中看到的那样，主动链接最终具有“»”字符。这仅是为活动链接创建的，因此它是动态创建的。使用JavaScript，您可以使用任何可以使链接看起来很活跃的角色或标志性图像。
实现
要实现此类菜单，首先您需要的是css文件，例如links_style.css，以定义链接的样式。接下来是JavaScript文件NAV.J。在文件nav.js中，首先我们声明了三个数组。一个称为“链接”的数组包括链接的名称。另一个数组称为“ links_text”，由链接的文本组成（例如链接1）。前者将用于与此文件进行比较。使用链接文件中的标题在链接数组中的各个元素命名，不包括扩展名（即，如果第一个链接将您带到index.htm，则将其命名为索引）。第三个数组称为“ links_url”，包括链接将带动用户的URL。现在，我们想要的是在没有扩展名的情况下比较到当前页面的文件名中的每个元素。然后，我们将相应地分配链接样式，以及您决定添加到链接文本中以突出显示活动页面的任何额外文本或图像。让LOC为比较字符串。 LOC可以找到：var loc = string（this.location）; loc = loc.split（“/”）; loc = loc [loc.length-1] .split（“。”）; loc = loc [loc.length-2];因此，如果当前页面为https://www.sitepoint.com/index.htm，则LOC将为索引。现在，我们将其与数组链接中的每个元素进行比较。该数组和LOC的第一个元素相等，因此我们以以下方式编写此链接。 document.write（'＆＃x3c; table onMouseOver =“ this.className ='explorer_active'; return true” onmouseout =“ this.classname ='evervorer_active'; return true onmousedown onmousedown =“ this.classname ='explorer_actor_active ='explorer_active'explorer_active'explorer_active'; '''>＆＃x3c; tr>＆＃x3c; td>＆＃x3c; a href =“'links_url [i]''>'links_text [i]'由于链接阵列中的其他元素不等于LOC，因此它们将写为：document.Write（'＆＃x3c; table onMouseOver =“ this.classname ='explorer_over'; return true true” onmouseout =“ this.classname ='className ='explorer'; onclick =“ location.href =''links_url [i]'''>＆＃x3c; tr>＆＃x3c; td>＆＃x3c; a href =“'links_url [i]'>'links_text [i links_text [i]''这就是您的动态菜单！您必须在所有页面中放置的代码为：＆＃x3c; script Lakenanage =“ javascript” src =“ nav.js”>＆＃x3c;/script>将此代码放置在需要出现在页面上的导航菜单。您需要的另一个代码是＆＃x3c; link rel =“ stylesheet” href =“ links_style.css” />必须放置在您的html页面的＆＃x3c; head>部分中。因此，列表1 nav.js是： / *链接详细信息 * / var links = new Array（“ link1”，“ link2”，“ link3”）; var links_text = new Array（“链接1”，“链接2”，“链接3”）; var links_url = new array（“ link1.htm”，“ link2.htm”，“ link3.htm”）; / *解析位置 */ var loc = string（this.location）; loc = loc.split（“/”）; loc = loc [loc.length-1] .split（“。”）; loc = loc [loc.length-2]; /* Menu generating function */ function dyn_menu_gen() { for(var i=0; i
