jQuery当前页面突出显示 [英] jQuery current page highlight

问题描述

如何使用jQuery突出显示当前页面?换句话说，在当前页面的a元素中添加一个当前"类.

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.

这是我的代码:

    <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/)).

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/).

我已经看到了body/ID类方法，并且希望使用自动jQuery解决方案.

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

这是我的网站.

推荐答案

这是我在自己的个人网站上执行的操作.(链接此处)

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

这篇关于jQuery当前页面突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！