jQuery当前页面高亮答案

【问题标题】：jQuery current page highlightjQuery当前页面高亮
【发布时间】：2013-02-14 21:31:46
【问题描述】：

如何使用 jQuery 突出显示当前页面？换句话说，给当前页面的 a 元素添加一个“当前”类。

这是我的代码：

    <div id="nav">
        <ul>
            <li><a href="../articles/">Articles</a></li>
            <li><a href="../photos/">Photos</a></li>
            <li><a href="../info/">Earthquake Info</a></li>
        </ul>
    </div>

我研究了几种不同的方法，但大多数都依赖于链接到页面（即articles.html）而不是目录（即../articles/）。

我见过 body/ID 类方法，我更喜欢自动 jQuery 解决方案。

Here's my site.

【问题讨论】：

标签： jquery highlight

【解决方案1】：

这就是我在我的个人网站上的做法。（链接Here）

<ul id="navLinks">
    <li><a id="homeLink" href="/">Home</a></li>
    <li><a id="blogLink" href="/blog/">Blog</a></li>
    <li><a id="photosLink" href="/photo-gallery/">Photos</a></li>
    <li><a id="portfolioLink" href="/portfolio/">About Me</a></li>
    <li><a id="contactLink" href="/contact/">Contact</a></li>
</ul>



var section = window.location.pathname;

if (section == '/') { $('#homeLink').attr('class', 'selected'); }
if (section.substring(0, 5) == "/blog") { $('#blogLink').attr('class', 'selected'); }
if (section.substring(0, 9) == "/articles") { $('#blogLink').attr('class', 'selected'); }
if (section.substring(0, 8) == "/contact") { $('#contactLink').attr('class', 'selected'); }
if (section.substring(0, 14) == "/photo-gallery") { $('#photosLink').attr('class', 'selected'); }
if (section.substring(0, 10) == "/portfolio") { $('#portfolioLink').attr('class', 'selected'); }

【讨论】：

【解决方案2】：

您可以使用document.location.href 来执行此操作并拆分字符串。

在您的元素中运行一个循环，将它们与拆分的字符串进行比较，然后将类添加到右侧。

【讨论】：

【解决方案3】：

this 应该可以解决您的问题。
您可能需要稍微调整它以使用文件夹..

【讨论】：

这看起来可以工作，但是有没有一种方法可以在没有用户权限的额外代码的情况下实现这一点？你有我可以看的示例脚本或页面吗？

【解决方案4】：

虽然我找不到 jQuery 解决方案，但我确实找到了一个不错的 Javascript alternative。

【讨论】：