jQuery adding active class to nav, now nav not working

Question

So, I'd like my breadcrumb nav to show the user which page he/she is on by having the be a different color according to the page they are on. I.e. if on home, the home link is gray whilst the others remain black.

To do this I've added the following code to my app:

$(function(){

    $('.breadcrumb li a').on('click', function(e){

        e.preventDefault(); // prevent link click if necessary?

        var $thisA = $(this);
        var $li = $thisA.parent('a');

        if (!$thisA.hasClass('active'))
        {
            $li.find('a.active').removeClass('active');
                $thisA.addClass('active');
        }

    })

})

However, with the above code it never releases the active class when I also click events for example they end up both just being gray. Also, the page doesn't switch it stays on home page but with home and events grayed out.

The css:

.breadcrumb li a.active {    color: #999999;}

The html

 <ul class="breadcrumb">
     <li>
       <a class="active" href="/profiles"> Home</a>
     </li>
     <li>
       <a class="active" href="/events"> Events</a>
     </li>
     <li>
       <a href="/inbox"> Messages</a>
     </li>
     <li>
       <a href="/welcome"> My Profile</a>
     </li>
   </ul>

the page won't switch if you put "event.preventDefault"... that's the point — Jules G.M., Dec 17 '13 at 20:14
@Julius when I remove event.preventDefault the active class doesn't stay on the it does until I release the click? But when I keep the event.preventDefault, the active class stays but the page doesn't switch.. — Sonny Black, Dec 17 '13 at 20:19

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

Change

var $li = $thisA.parent('a');

to

var $li = $thisA.parents('ul');

because this line

 $li.find('a.active').removeClass('active');

looks for a child a.active and your original $li would be null because your original line is trying to find a a that is a parent of the clicked a.

EDIT

Resources on highlighting the current page:

http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

$("a[href*='" + location.pathname + "']").addClass("current"); from highlighting the current page in a list of links using css / html

http://www.eznetu.com/current-link.html#

edited May 23 '17 at 12:19

Community

1
1

answered Dec 17 '13 at 20:14

TreeTree

3,200
3
27
39

Thanks so much @TreeTree, that's perfect. The only thing now is the page doesn't switch, and when I remove event.preventDefault the active class doesn't stay on the it does until I release the click? But when I keep the event.preventDefault, the active class stays but the page doesn't switch.. – Sonny Black Dec 17 '13 at 20:17
@SonnyBlack What you're looking for isn't possible the way you're doing it. What you need to do is detect which page you're on once the page loads, then add the class to the proper menu item. The page detection is the tricky part, there are a lot of ways to go about it depending on what information your page HTML provides. – TreeTree Dec 17 '13 at 20:24
1

I'm relatively new to jQuery, would you mind providing an example? And I'll accept your answer? – Sonny Black Dec 17 '13 at 20:25
@SonnyBlack Honestly this type of question isn't the most convenient to provide a working example of because it involves multiple pages on an actual mini-website. I have posted a few links that demonstrate how to do this. – TreeTree Dec 17 '13 at 20:40

jQuery adding active class to nav, now nav not working

1 Answers1