Question

Okay,

So what I am trying to accomplish is having the navigation updated with the “selected” class signifying the page the current end-user is on.

I have tried a multitude of things. But, nothing seems to be working. Here is my code:

The jQuery:

jQuery(function () {
    var path = location.pathname.substring(1);
    if (path)
        jQuery('.navigation ul li a[href$="' + path + '"]').attr('class', 'selected');
});

The HTML:

<div class="navigation">
    <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="team.html">TEAM</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="services.html">SERVICES</a></li>
        <li><a href="portfolio.html">PORTFOLIO</a></li>
        <li><a href="contact.html">CONTACT</a></li>
    </ul>
    <div class="clear"></div>
</div>

The CSS:

.navigation li a.selected {
    background: url(../images/navigation-background-active.png) repeat-x;
    text-decoration: none;
}

If you are confused of what I am asking for… You can view this link:
http://docs.jquery.com/Tutorials:Auto-Selecting_Navigation

Thank you so much!

Answer 1

Edit: I looked at your website and the value of path is portfolio/newish/index.html

Probably you should substring based on lastIndexOf /. Try below,

jQuery(function () {
    var path = location.pathname; //return /portfolio/newish/index.html
    path = path.substring(path.lastIndexOf('/') + 1); //will return index.html

    if (path)
        jQuery('.navigation ul li a[href$="' + path + '"]').addClass('selected');
});

Your code looks fine as is, but I think you should use .addClass to add a class to an element. Try below,

jQuery('.navigation ul li a[href$="' + path + '"]').addClass('selected');