文章/答案/技术大牛

发布

jquery导航当前页高亮

基础概念

jQuery 导航当前页高亮是指在使用 jQuery 库时，通过添加特定的样式来突出显示当前页面所对应的导航菜单项。这通常用于提升用户体验，使用户能够清晰地看到他们当前所在的页面。

类型

基于 URL 的高亮：根据当前页面的 URL 来确定哪个导航项应该被高亮。
基于哈希的高亮：利用 URL 中的哈希值（#）来确定高亮项。

应用场景

网站导航栏：适用于任何需要导航菜单的网站。
单页应用（SPA）：在单页应用中，通过哈希变化来更新高亮项。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 根据当前页面的 URL 来高亮显示导航菜单项：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 导航高亮示例</title>
    <style>
        .active {
            color: red; /* 高亮样式 */
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <ul class="nav">
        <li><a href="/home">首页</a></li>
        <li><a href="/about">关于我们</a></li>
        <li><a href="/contact">联系我们</a></li>
    </ul>

    <script>
        $(document).ready(function() {
            // 获取当前页面的 URL
            var currentUrl = window.location.pathname;

            // 遍历所有导航链接
            $('.nav a').each(function() {
                // 如果链接的 href 属性与当前 URL 匹配
                if ($(this).attr('href') === currentUrl) {
                    // 添加 active 类
                    $(this).parent().addClass('active');
                }
            });
        });
    </script>
</body>
</html>

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

问题1：高亮不生效

原因：可能是 jQuery 库未正确加载，或者选择器使用错误。 解决方法：

确保 jQuery 库已正确引入。
检查选择器是否正确，确保 .nav a 能够匹配到导航链接。

问题2：动态内容更新后高亮失效

原因：如果导航菜单是通过 AJAX 或其他动态方式加载的，初始的 jQuery 脚本可能无法正确处理这些动态内容。 解决方法：

使用事件委托或在动态内容加载完成后重新执行高亮逻辑。

$(document).on('click', '.nav a', function() {
    $('.nav li').removeClass('active');
    $(this).parent().addClass('active');
});

通过上述方法，可以有效解决 jQuery 导航当前页高亮的相关问题，并确保功能的稳定性和可靠性。

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

有帮助

没帮助

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

html、highlight

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

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

回答已采纳

5回答

使用PHP的主动导航栏？

php、html、css

我试图使用PHP创建一个活动导航栏，其中当前页面将在导航栏中高亮显示或着色。我使用的代码： <li <?>> </li>如果该页是导航栏中的当前页，代码将将attribut

浏览 3提问于2016-08-30得票数 0

回答已采纳

2回答

HTML/jQuery -如何动态突出当前页面或部分？

javascript、html、jquery、css

jQuery从导航栏动态高亮显示当前页面。，我花了好几个小时浏览现有的StackOverflow帖子，但没有用吗？是的！使用下面的代码，我试图使当前页面(/selected部分)在我的导航栏中保持绿色高亮显示(以向最终用户显示他们当前所在的页面)。悬停的功能是有效的，但我似乎不能让它保持这种颜色，一旦我点击它。FYI --我在我的“导航菜单”中

浏览 5提问于2021-01-31得票数 0

回答已采纳

1回答

使用Jquery在导航菜单中突出显示父链接

jquery、navigation

我使用下面的Jquery在导航中突出显示当前页面的链接。Link$('#nav a[href="'+url+'"]').addClass('active'); </li> <li><a href="">Products<

浏览 0提问于2012-04-25得票数 4

回答已采纳

1回答

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

theme-development、menus、themes、pages、css

我正在为我的学校定制一个WordPress主题，我对导航菜单中的当前页面没有显示的事实感到有点恼火。例如：您可以清楚地看到，我在导航菜单中的某一页上盘旋，而我正在悬停的页面将如预期的那样突出显示。我怎样才能做到这一点？

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

回答已采纳

2回答

将下一页上的按钮设置为焦点，就像用户单击的按钮一样

javascript、jquery、html、css

目前，我有一个标题，其中包含每个页面上相同的顶部导航栏，但我想要做的是，当用户单击其中一个导航按钮并转到下一个页面时，导航按钮将在下一页中突出显示(或聚焦)。有办法做到这一点吗？下面是导航栏的当前代码：div.scrollmenu { overflow: auto;}#people">People</a> <a tabindex="15" href

浏览 5提问于2017-09-25得票数 1

回答已采纳

5回答

Jquery向li节点删除和添加活动类& preventDefault的问题

php、javascript、jquery

删除Jquery并在LI导航上添加“活动”类可以使用preventDefault，但不再使用链接我知道为了突出显示当前页面的导航项目，移除活动类并将其添加到我发现我必须使用e.preventDefault()才能使它工作，但是当我这样做时，链接不起作用，但突出显示的导航项目起作用。如果我删除了preventDefault()，它会导航但不会高亮显示。我应该说我的导航位于一个header.

浏览 1提问于2012-05-22得票数 0

回答已采纳

1回答

Rails打印导航栏，使用循环和突出显示按钮引导到当前页面

ruby、ruby-on-rails-4、slim-lang

我想在页面顶部创建像这样的导航条。"CSS“按钮被高亮显示，因为它会导致当前页面。paths = ['root_path', 'articles_path']使用这两个数组，我可以使用一个循环打印导航条。另外，我还可以在循环中包含条件，所以指向当前页面的按钮会附加一些html类(更改它

浏览 0提问于2016-02-15得票数 0

回答已采纳

2回答

当前可由用户修改的菜单的导航高亮显示？

navigation

>是否有一种在导航中高亮显示当前页面链接的方法。不应该修好的。用户应该能够随心所欲地调用页面，并创建任意数量的页面(突出显示功能应该仍然有效)。有什么建议或教程吗？

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

回答已采纳

1回答

具有自定义post类型的当前页面的Nav样式

custom-post-types、menus

我试图使用下面的CSS来高亮显示当前页面或父页面的WordPress站点的导航样式。我使用自定义post类型来显示项目。current_page_parent > a突出显示项目链接(. current -菜单项)和博客链接(.current_page_parent)，在主项目页面上，博客链接显示为当前页面的父页面如何让项目帖子显示项目导航链接作为父链接？任何帮助都很感激。托尼

浏览 0提问于2014-10-19得票数 0

回答已采纳

3回答

用jQuery高亮显示导航菜单中的当前页面项

jquery、highlight、current-page

我在网上读过这篇文章，但其他的内容都太复杂了，我只想实现一个简单的代码，我可以不用再读子字符串之类的东西，所以我认为这对jquery中的菜鸟来说是一个很好的挑战。我已经想出了这个代码，但没有成功。lettering">WORKS</a></li> <li><a href="/contact" id="contact" class="lettering">CONTACT</a></

浏览 4提问于2012-01-19得票数 2

回答已采纳

1回答

如何突出显示当前页的父页？

lift

如何高亮当前页面的父菜单项？search-results") >> Hidden)<lift:Menu.builder ul:class="tabs" li_item:class="selected" /> 但是，当我导航到

浏览 0提问于2011-05-13得票数 2

回答已采纳

2回答

突出显示当前链接，同时使用CSS和jQuery排除某些页面

jquery、html、css

我正在使用下面的代码来突出显示当前页面链接的用户，但是我想知道是否有可能让jQuery查看我的主页链接，因为我使用图片单击将用户带回主页，而高亮显示也适用于我的链接下面，我真的不希望它这样做。预先谢谢(警告-不要太了解jQuery ) jQuery

浏览 1提问于2014-05-30得票数 1

回答已采纳

3回答

在我的JS代码中，Navbar项没有突出显示

javascript、html、css

我试图突出显示用户当前所在的页面的导航栏项，逻辑看起来不错，但不起作用:下面是连接到所有页面的基本导航栏： <ul

浏览 3提问于2020-08-07得票数 0

1回答

symfony2 twig :在右侧页面突出显示导航栏的最佳实践

jquery、css、symfony、twig、navbar

在我的网站上，我有一个导航栏，上面有指向不同控制器的链接。到目前为止，我使用jquery来突出显示当前页面的链接，但不知何故，事情变得更加复杂，而且还不够。所以我的问题是:在导航栏上突出显示当前页面链接的最佳实践是什么？-将链接的id作为参数传递到模板中？-不需要修改每个控制器的响应的更自动的方法？

浏览 2提问于2014-12-04得票数 1

3回答

jquery导航高亮显示

jquery、uinavigationcontroller

嗨，我正在尝试用Jquery编写一个脚本，它可以自动选择主导航中的当前页面链接。导航只是一个简单的UL，如下所示： <li> </li>Vision</a> <li> &l

浏览 1提问于2010-10-08得票数 0

回答已采纳

1回答

一些js文件和社交媒体插件在使用jQuery移动滑动面板更改页面时没有加载

facebook、panel、jquery-mobile-panel

我正在使用jQuery移动的面板功能在页面之间导航。我的大部分网页都有一些jssor插件和社交媒体插件，比如Facebook和Twitter。当选择插头时，插头不工作通过面板项。这是我的当前页面：$.mobile.ajaxEnabled = false; 这是要使用的正确代码吗？我应该如何将它集成到代码中

浏览 4提问于2015-08-07得票数 1

回答已采纳

1回答