jQuery current page highlight

Question

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.

jsmith · Answer 1 · 2011-10-13T23:06:20.710

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

score 0 · Answer 2 · answered Oct 13 '11 at 22:54

0

You could do this with document.location.href and spliting the string.

Run a loop through your elements compare them to splited string and add class to right one.

answered Oct 13 '11 at 22:54

Luka

321
1
4
21

score 0 · Answer 3 · edited May 23 '17 at 12:03

0

this should sort you out.
you might need to tweak it slightly to work with folders..

edited May 23 '17 at 12:03

Community

1
1

answered Oct 13 '11 at 22:54

J. Ed

6,692
4
39
55

This looks like it could work, but is there a way to implement this without the extra code for the user's permissions? Do you have a sample script or page I could look at? – Ryan Oct 14 '11 at 17:01

score 0 · Answer 4 · answered Oct 14 '11 at 18:40

0

While I couldn't find a jQuery solution, I did find a nice Javascript alternative.

answered Oct 14 '11 at 18:40

Ryan

6,027
16
52
89

jQuery current page highlight

4 Answers4

Linked