0

I'm surprised I'm having so much difficulty finding the answer to this question considering this is such a common thing. I'm working on a tumblr site and I need to change the color of the active link when the user clicks different links in the nav. I've seen tons of answers like this...

$(function() {
    var $sidebar = '#sidebar';

    $sidebar.on('click', '.item a', function(e) {           

        console.log('hit desktop');
        $('ul.nav li a').removeClass('active');
        $(this).addClass('active');
 });

//css
.active { color: black;}

So this function gets called and added to the DOM momentarily but is removed as soon as the page is refreshed to the new link. But assuming your not using sometype of accordion when you click a nav link the user is redirected to that page. So even though the function gets called as soon as the page refreshes to the new one the function is essentially erased. Can I use a cookie or an if statement to compare the href? Can this be done client side?

2 Answers 2

0

simply use CSS:

a{
    color:blue;
}
a:hover{
    color:green;
}
a:active{
    color:orange;
}
a:visited{
    color:red;
}

:active is when the user is holding the click on the link or the functions related to the link is being called or working.

:visited is when the user has clicked on it and it is done

4
  • Note that it's a colon : before active, not a period . as in the question. Period is for classes.
    – Tom Zych
    Jun 29, 2014 at 16:32
  • It shows up in inspector but has no effect on the menu. I have no idea why.
    – London804
    Jun 29, 2014 at 16:49
  • see, this works perfectly, there might be something else wrong with your code: jsfiddle.net/CMMt7 Jun 29, 2014 at 16:54
  • But the link clicked on will open a new page so the active state will only be seen for a fraction of a second. active works if the link stays on the page (a page anchor for example).
    – lharby
    Jun 30, 2014 at 7:51
0

I'm not entirely sure what you meant but if you'd like to change the active state on the current navigation button and remove the state from all others through jquery then you could do it like this.

$('#sidebar li a').click(function() {
    $(this).closest("li").addClass('active').siblings().removeClass('active');
    return(false);
});

and the HTML would be

<div id="sidebar">
    <ul>
        <li><a href="#">First Item</a></li>
        <li><a href="#">Second Item</a></li>
        <li><a href="#">Third Item</a></li>
    </ul>
</div>

This would essentially add the class active to the current list item and remove it from all other siblings.

3
  • What you wrote is a variation of the code I wrote. The problem is when you click the link in the nav it gets added but then the pages href changes to the new page and then is removed again.
    – London804
    Jun 29, 2014 at 16:53
  • Although the css elements of this code would work, return false would prevent the client navigating to the page they selected.
    – lharby
    Jun 30, 2014 at 7:52
  • There is a hacky way to do it, but it has to be hard coded manually. Is it possible to see a link to the tumblr just to make sure of a couple of things?
    – lharby
    Jun 30, 2014 at 7:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.