JavaScript实现高亮导航菜单效果

这段代码是用于实现网站导航栏高亮功能的JavaScript片段，主要用于根据当前页面URL自动为导航菜单中的相应链接添加激活状态。以下是三个主要部分的详细解释： 1. 首段代码： - 使用`document.location.href.toString()`获取当前页面的完整URL。 - 使用`substr`方法截取URL中的路径部分（从最后一个斜杠后的字符开始）并存储在`currentPage`变量中。 - 检查`currentPage`长度是否小于1，如果是，则默认激活第一个导航元素，赋予其`"active"`类名。 - 遍历`.nav-menu li`中的所有导航链接（假设它们是列表项），通过访问每个链接的`href`属性，同样处理路径部分并与`currentPage`比较。 - 如果链接的路径与当前页面路径匹配，将该链接的类名设置为`"active"`，使其突出显示。 2. 第二段代码： - 这段代码在HTML结构中使用了CSS选择器`$('menu')`和`getElementsByClassName`方法来获取名为`menu`的元素下的所有`li`子元素（可能是一个下拉菜单或一级菜单）。 - 与第一段类似，遍历`li`元素中的每个子链接（通过`getElement('a')`获取），获取其`href`属性，然后进行路径匹配。 - 如果链接的路径与当前页面一致，将该链接添加`"select"`类，这可能是自定义的高亮样式。 3. 第三段代码： - 与第一段代码基本相同，但使用`$$('.nav-menu li')`选取所有`.nav-menu`下的`li`元素，然后通过`.getElement('a').href`获取链接的完整URL，并执行路径匹配操作。 总结来说，这些JavaScript代码的核心功能是实时检测用户的浏览位置，当用户访问特定页面时，导航菜单中对应的链接会自动获得高亮效果，提高了用户体验和页面导航的直观性。这种导航高亮技术在响应式设计和单页应用（SPA）中非常常见，有助于用户快速定位他们当前所在的位置。