Question

如何使用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

Answer 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'); }

Answer 2

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

在元素中运行循环，将它们与分割字符串进行比较，并将类添加到右边。

Answer 3

this应该把你排除在外您可能需要稍微调整它以使用文件夹..

Answer 4

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

jQuery当前页面突出显示

4 个答案: