jQuery当前页面高亮

发布于 2024-12-09 12:11:22 字数 637 浏览 0 评论 0原文

如何使用 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 解决方案。

这是我的网站。

原文

How can I use jQuery to highlight the current page? In other words, add a "current" class to the a element of the current page.

Here's my code:

    <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>

I've researched several different approaches, but most of them rely on linking to pages (i.e. articles.html) instead of directories (i.e. ../articles/).

I've seen the body/ID class method and would prefer an automatic jQuery solution.

Here's my site.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

撩发小公举 2024-12-16 12:11:22

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

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

This is how I do it on my personal site. (Link 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'); }

回复收藏 0 原文