Question

I’m making a one-page site where the menu is fixed, so when the user clicks a link it scrolls down to that part of the page. The menu link of the section the user is on should have a different color. For this I have the class “current.” I’m trying to make this change with jQuery addClass() and removeClass(), but am having no luck. The code I have so far is below.

$(document).ready ( function(){
    $(".about").click(function(){
        $(".home").removeClass("current");
        $(".about").addClass("current");
    });
});

EDIT:

menu HTML:

<nav id="nav_list">
<ul>
<li class="home current"><a href="#">Home</a></li>
<li class="about"><a href="#about">About</a></li>
<li class="portfolio"><a href="#portfolio">Portfolio</a></li>
<li class="testimonials"><a href="#testimonials">Testimonials</a></li>
<li class="contact"><a href="#contact">Contact</a></li>
</ul>
</nav>

div HTML:

<div id="about" class="page">
<p>Lorem ipsum dolor sit</p>
</div>

(There is a div to go with each menu link.)

EDIT2

css:

#nav_list .current a{
color: #D4D1FA;
}

I noticed that if I remove the #nav_list, I don’t see a change in color from the start.

Answer 1

Try this – it removes the current class from all list items and adds the class to the clicked one.

$("li").click(function(){
    $(".current").removeClass("current");
    $(this).addClass("current");
});

To answer your specific use case though. Set your links to display as block. This causes them to fill their list item containers. Then monitor the link click instead of the list item click. What was happening before was that clicking on the link did not trigger a click on the list item container, so your add/remove class code probably was never firing. By making it fill the area you capture all clicks.

http://jsfiddle.net/hkZsL/

css

a { text-decoration: none; display: block; }
li { padding: 4px; border: 1px solid gray; width: 100px; float: left; }
.current { border: 1px solid red; }

javascript

$("a").click(function(){
    $(".current").removeClass("current");
    $(this).parent().addClass("current");
    return false;
});