在其任何子页面上突出显示标题菜单项答案

【问题标题】：Highlighting a header menu item when on any of its sub pages在其任何子页面上突出显示标题菜单项
【发布时间】：2013-08-27 03:37:18
【问题描述】：

我的网站标题中有一个主要的nav，有8 个左右的链接。

在大多数这些页面中，左侧都有一个子导航。

当您在任何子页面上时，我希望能够在标题中突出显示当前链接。

我无法手动执行此操作，因为标题链接是通过 cms 全局编辑的，因此需要将某种 JavaScript 应用于每个子页面，以突出显示主标题链接。

高亮当前子页面项目的脚本也很高兴知道，但不是必需的。我知道它就在某个地方，但我似乎总是很费时间弄清楚如何让它发挥作用。

提前感谢您的帮助。

【问题讨论】：

与其让我们挖掘您的网站，还不如复制一个最小的/short, self-contained correct/compilable example 供我们使用？在此处（JavaScript/jQuery、HTML 和 CSS）发布相关代码，最好在JS Fiddle 或类似地址发布现场演示；请：帮助我们来帮助你。

【解决方案1】：

我会亲自使用 PHP 并定义一个变量，例如 $page = "home"; 然后我会用 if 语句在标题中检查它。如果你不能在 PHP 中做到这一点，可以通过使用 jQuery 获取当前 url 来完成。

var pathname = window.location.pathname;

然后您可以使用 if 语句检查并更改按钮的类是否为真。

或者，如果您只需要 html 文件名 (test.html)，您可以这样做。

var pathname = document.location.pathname.match(/[^\/]+$/)[0];

【讨论】：

【解决方案2】：

添加，每个菜单项首先有子页面的下拉菜单（我想你不必显示它..保持隐藏）

然后，使用类似的东西

 $(function(){
    var actlink = $(location).attr('href');

    $('ul > li > a[href$="actlink"]').parent("li").addClass('active');
});

我也推荐了here

【讨论】：