将当前标记类应用于当前页面？答案

【问题标题】：Applying Current Tag Class To Current Page?将当前标记类应用于当前页面？
【发布时间】：2011-12-15 17:17:04
【问题描述】：

我有一个导航菜单，在这个菜单中我有“选择”标签，因此有“当前”标签，指的是用户当前所在的页面。因此，在每个 HTML 页面中，无论用户可能在哪个页面上，在导航菜单中，他们选择的项目都会在某种意义上被突出显示，以告知他们当前所在的页面。

问题？我希望能够在 JavaScript 和/或 jQuery 中自动执行此操作，因为我将在内容管理系统和/或包含中实现此功能，并且如果 NAVIGATION 将无法实现将类应用于当前页面MENU 是一个反对静态 HTML/CSS 的包含。

这有意义吗？有什么想法吗？

非常感谢！亚伦

【问题讨论】：

标签： javascript jquery css class navigation

【解决方案1】：

由于您没有提供任何代码，我只能给您一个一般示例，但如果 URL 与菜单链接相同，这可能会起作用。

$('.navigation>ul>li>a').each(function(){
  if($(this).prop('href') == (window.location.pathname.match(/.*\/(.*)$/)||['',''])[1]){
    $(this).addClass('current');
  }
});

【讨论】：

我尝试应用这个但它没有用，我认为它试图找到一个 URL 的完整位置，但我只有本地 URL，因此 index.html、about.html 等. 这就是我的意思... jsfiddle.net/rw9zs 所以实际上我必须将它应用到.navigation ul li，所以我不会干扰子菜单。有任何想法吗？非常感谢！
您需要将该类应用于所有 li 元素还是只应用于顶层？
我编辑了我的答案，但如果我误解了请填写。正则表达式仅匹配路径的文件名，但仅当文件位于同一文件夹中时才有效。
很抱歉不得不这么说，但它仍然无法正常工作。是的，它们都在同一个文件夹中……但是，我尝试将窗口更改为文档，但这似乎不起作用。
我看到你的小提琴包括 mootools，而不是 jquery。会不会是这个问题？

【解决方案2】：

大概是这样的吧？使用 JavaScript 将每个链接的 HREF 与当前页面的 URL 进行比较，如果匹配则突出显示。

$('.menulink').each(function() {
    var href = $(this).attr('href');
    var tarr = location.href.split('/');
    var curr = tarr[tarr.length-1];
    if (href===curr) {
        $(this).addClass('current');
    };
});

【讨论】：

我尝试应用这个但它没有用，我认为它试图找到一个 URL 的完整位置，但我只有本地 URL，因此 index.html、about.html 等. 这就是我的意思...jsfiddle.net/rw9zs 所以实际上我必须将它应用到.navigation ul li，所以我不会干扰子菜单。有任何想法吗？非常感谢！

【解决方案3】：

也许使用var path = window.location.pathname; 获取网址，然后从那里您可以检查页面并匹配导航菜单以突出显示元素。

【讨论】：