js实现当前导航菜单高亮显示

在JavaScript中实现当前导航菜单的高亮显示，通常涉及到以下几个基础概念：

基础概念

DOM操作：Document Object Model，即文档对象模型，是HTML和XML文档的编程接口。通过DOM，可以修改网页的内容、结构和样式。
事件监听：用于在特定事件发生时执行代码，如点击事件、页面加载事件等。
CSS选择器：用于选择HTML元素并应用样式。

实现步骤

获取当前页面的URL：通过window.location.href获取当前页面的完整URL。
匹配导航菜单项：遍历导航菜单项，检查每个菜单项的链接是否与当前页面的URL匹配。
添加高亮样式：如果匹配成功，则给该菜单项添加一个高亮的CSS类。

示例代码

以下是一个简单的示例，展示了如何实现这一功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Highlight</title>
    <style>
        .nav-item {
            padding: 10px;
            margin: 5px;
            border: 1px solid #ccc;
        }
        .active {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li class="nav-item"><a href="/home">Home</a></li>
        <li class="nav-item"><a href="/about">About</a></li>
        <li class="nav-item"><a href="/contact">Contact</a></li>
    </ul>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const navItems = document.querySelectorAll('.nav-item');
            const currentPath = window.location.pathname;

            navItems.forEach(item => {
                const link = item.querySelector('a').getAttribute('href');
                if (link === currentPath) {
                    item.classList.add('active');
                }
            });
        });
    </script>
</body>
</html>

解释

HTML部分：
- 创建了一个简单的导航菜单，每个菜单项包含一个链接。
- 定义了两个CSS类：.nav-item用于基本样式，.active用于高亮显示。

JavaScript部分：
- 使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
- 获取所有导航菜单项，并遍历它们。
- 对于每个菜单项，获取其链接并与当前页面的路径进行比较。
- 如果匹配成功，则添加.active类以实现高亮效果。

应用场景

单页应用（SPA）：在单页应用中，页面不会完全刷新，但导航菜单仍然需要高亮显示当前页面。
多页网站：在传统的多页网站中，每次页面跳转后都需要更新导航菜单的高亮状态。

可能遇到的问题及解决方法

路径匹配问题：
- 问题：如果链接包含查询参数或哈希值，直接比较路径可能不准确。
- 解决方法：使用正则表达式或字符串处理函数来规范化路径，忽略查询参数和哈希值。

动态路由问题：
- 问题：在某些框架（如React、Vue）中，路由可能是动态生成的，导致路径匹配困难。
- 解决方法：使用框架提供的路由工具或钩子函数来获取当前路由信息，并进行匹配。

通过以上方法，可以有效地实现导航菜单的高亮显示功能，并确保其在不同场景下的正确性和稳定性。

页面内容是否对你有帮助？

有帮助

没帮助

保持导航菜单的“当前菜单-项目”的突出显示？

我的网站的导航菜单是通过一些菜单项是类别页(比如/category/news/)。我注意到，只有当类别页面是当前的时候，菜单才会被高亮显示(“当前菜单项”类)。如何在查看单个帖子页(/news/123/)时使菜单<

浏览 0提问于2013-04-28得票数 1

回答已采纳

1回答

在JavaScript (.js)文件中包含HTML

、、、、

>" href="Page4.php">Page 4</a></div>这很好，但我必须从PHP转到JavaScript。URL，如何将其传递给JS，以及如何在JS (当前</e

浏览 3提问于2020-03-22得票数 0

回答已采纳

1回答

如何在Laravel中更改锚点标签的活动类？

、

#programs' }}">Programs</a></li>example.com/#programs<li class="{{ Request::path() === "/" ?"current"

浏览 1提问于2020-11-03得票数 0

1回答

Android支持库中导航视图的定制

、、

我正在尝试使用支持库实现导航视图。使用主颜色，导航抽屉中选定的菜单将被高亮显示。但我想移除选中项目的突出显示的背景。 

浏览 7提问于2015-07-10得票数 1

回答已采纳

1回答

滚动到元素后突出显示该元素

、、、

这是我正在使用的小提琴：如您所见，它有一个单页滚动导航。我想在滚动到某个部分时，对<strong> </strong>标记中的标题实现突出显示效果(最好使用.animate函数)。只需手动滚动页面，您将在导航菜单中看到一个高亮显示；项目的滚动部分，但我不能完全解析的js代码，以应用相同的标题，并干预它与.animate函数似乎对我来说要困难得多。你能帮帮我吗?

浏览 3提问于2013-04-24得票数 0

回答已采纳

1回答

如何突出显示导航菜单中的当前页面？

、、、、

我正在为我的学校定制一个WordPress主题，我对导航菜单中的当前页面没有显示的事实感到有点恼火。例如：您可以清楚地看到，我在导航菜单中的某一页上盘旋，而我正在悬停的页面将如预期的那样突出显示。然而，我现在的页面，叫做"Arhiva"，并没有突出显示，我认为这可能有点令人困惑。我不希望当前页面和鼠标悬停在上面的页面以相同的方式被高亮显示。我相信，导航<

浏览 0提问于2013-05-04得票数 2

回答已采纳

1回答

我最近在玩Sublime Text 2，并通知了一些奇怪的Javascript语法突出显示：*var* height = this.parent*width*(width); "content“、"height”、"width“的突出显示有点奇怪。显然，它们是关键字，但在这种情况下，用不同的颜色来标记它们是令人困惑的。有没有办法在Sublime Text 2中禁用或重新配置JavaScript的关键字突出显示？

浏览 3提问于2012-11-09得票数 3

1回答

Bootstrap starter模板折叠菜单未正确突出显示

、

只是显示的网址http://twitter.github.io/bootstrap/examples/starter-template.html#正确，但我不明白(好的，我从启动开始)当我缩小浏览器窗口大小，我得到菜单按钮，菜单很好地显示，但只有主页选项被高亮显示时，它悬停在它上面。我把js放在正文的末尾，把jquery放在bootstrap.js之前。火狐或Chrome也是如此，It 10的演示没有响

浏览 1提问于2013-05-13得票数 1

回答已采纳

12回答

突出显示当前页的导航菜单

、

在有一些导航链接的页面中，我希望当前页面的链接是高亮的，如下所示：链接"HTML属性“被高亮显示(粗体)，因为这个链接将带一个链接到当前页面。我知道这可以手动实现(只是高亮了相应的链接，但是有什么聪明的方法吗？)动态地、自动地突出显示正确的链接？

浏览 8提问于2011-01-07得票数 25

回答已采纳

1回答

如何使用选项卡突出显示并获取同一页面上主导航菜单项和子导航菜单项的活动状态

、、、

在我的React <Header>组件中，我使用为主导航创建一个主菜单，其中包含了反应性路由器链接，而不是显示选项卡内容： href={item.url} /> </Tabs> 在同一页上，我再次对辅助菜单使用资料到主导航菜单

浏览 3提问于2022-11-24得票数 -1

2回答

如何遍历菜单并移除类，然后将类添加到当前菜单项

、、、

我有这个菜单结构，用于在内容滑块面板中导航。</a></li> </ul>我想遍历这些元素并删除高亮显示类，然后将高亮显示类添加到当前</e

浏览 1提问于2010-03-14得票数 2

回答已采纳

1回答

jQuery:在脱离元素时保持悬停状态？

1.我有两个菜单，" main“和" sub”--当您在主菜单中的特定链接上悬停时，它通过向it...great添加一个类来突出显示子菜单.问题是，当我滚下“主力链接”时，子导航的颜色会恢复正常.-但是我需要把这个保存下来如果我滚到潜艇导航上.他们都强调..。 ...then..。一旦我实际悬停在子nav....then上，高亮显示将只cease...and我滚动到的子菜单链接到突出显示的颜色(这

浏览 1提问于2012-01-15得票数 0

1回答

jQuery当前菜单-项-与js anylink菜单同时突出显示

、、

相关页面示例- 我正在使用这个片段来突出显示当前的导航项，它非常有用(谢谢乔！){ $(this).addClass("selected");}); 我还使用流行的菜单脚本，从动态驱动器，以推动导航下降。I希望将当前高亮显示的状态传递到子<em

浏览 3提问于2013-06-09得票数 0

回答已采纳

1回答

如何在Xcode 11中垂直堆叠编辑器？

、

Xcode 11中堆栈编辑器的选项已移到菜单中的。但是，左边的自动/编辑器/顶部的编辑器这三个选项都是灰色的。如何解锁以将编辑器排列在垂直堆栈中？

浏览 3提问于2019-09-24得票数 5

回答已采纳

1回答

如何实现不同类的CSS多级下拉菜单？

、、

我正尝试用CSS实现一个多级的下拉导航菜单，但有一个小部分我似乎无法正常工作。1)当鼠标悬停在菜单项上时，应使用不同的图像突出显示该菜单项(这很好用)。2)当鼠标悬停在子菜单项上时，父菜单项应突出显示。 Point2可以很好地工作，直到我在父菜单项上有一个类.bottom (这个类用于图像的细微差别)。如果父菜单项具有.bottom类，则不会发生高亮显

浏览 3提问于2011-10-30得票数 2

回答已采纳

1回答

无法从侧边栏删除档案和元数据

、、

这应该很容易对吧？从我的两个主要WP页面的侧边栏中删除档案和元数据。我看上去不行！我查看了外观>小部件，并确保档案和Meta没有出现在任何领域。我已经检查了我的主题的(丰产)选项在定制-播放宽度布局，我已经尝试了绞尽脑汁与一些PHP文件和CSS，看看我是否可以删除一些东西。删除是我唯一能做的。因为我不是代码作者。有什么想法吗？

浏览 0提问于2017-01-25得票数 1

3回答

突出显示多个菜单项

、、、

对于我的导航菜单，我使用WordPress的内置导航菜单功能。您可以添加类别、页面等，然后它将生成一个包含特定类的列表，您可以使用类似于current-menu-item的样式。我的问题在于：例如，如果一个帖子仅在Category A中，那么当您在带有该帖子的页面上时，Category A将在菜单中高亮显示。如果文章在Category A和Category B中，那么当您在页面上使用该帖子时，Cat

浏览 0提问于2012-09-24得票数 1

2回答

Rails生成站点导航的方法

、、、、

大多数网站的导航采用html无序列表的形式，列表元素内有锚点。键入所有这些项目标记似乎不像rails创建导航列表的干法。我问你如何创建一个用于rails导航的列表，如果你能帮助我开发下面描述的方法…… 我所做的是在我的application_helper中创建一个散列，然后在我的erb文件中添加一个快速迭代代码来为我生成列表

浏览 1提问于2011-09-29得票数 1

4回答

如何在主页中注入操作名以突出显示导航菜单中的当前操作？

我试图找到一个解决这个问题的解决方案(不使用javascript)：我可以向基本视图模型添加一个操作名(从它派生出所有其他视图模型)，但不知道是否有更好的方法。对于给定的操作，可以返回任意数量的不同视图，因此所有这些视图都需要在导航菜单中突出显示

浏览 4提问于2009-04-16得票数 1

1回答

引导导航条背景色问题

在我的肚脐上，我使用拉-左作为图像，当我这样做时，肚脐的右侧会变成不同的颜色。

浏览 3提问于2015-07-29得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js实现当前导航菜单高亮显示

基础概念

实现步骤

示例代码

解释

应用场景

可能遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐