Question

I got following menu:

   <ul id="nav" class="nav">
    <li>
     <a class="navitem active" href="javascript:loadTab();">My Profile </a>
    </li>
    <li>
     <a class="navitem search" href="javascript:loadTab();"> Search </a>
    </li>
    <li>
     <a class="navitem" href="javascript:loadTab();">Favorites </a>
    </li>
   </ul>

And my function (loaded in a .js file in the header):

function loadTab() {
    jQuery(".navitem").removeClass("active");
       jQuery(".navitem").click(function () {
          jQuery(this).addClass("active");
       });
}   

Removing the class “active” works, adding the class “active” to the clicked element isn’t working. Any ideas?

Best regards!

Answer 1

As thatidiotguy said, you’re removing the class in the wrong place. You want something like this:

jQuery(".navitem").click(function (event) {
    event.preventDefault();

    jQuery(".navitem").removeClass("active");
    jQuery(this).addClass("active");
});

Edit: And also, no need for the javascript:loadTab(); in your a tags. Change their href attributes to #:

<ul id="nav" class="nav">
    <li>
        <a class="navitem active" href="#">My Profile </a>
    </li>
    <li>
        <a class="navitem search" href="#"> Search </a>
    </li>
    <li>
        <a class="navitem" href="#">Favorites </a>
    </li>
</ul>

Also, I added event.preventDefault(); in the click event handler for the links.