Question

These group of links are my nav elements. var make_button_active removes and inserts class active once clicked into the link. With CSS, class active assigns an orange color to the text of the link. I have another link which is outside of this group. Its a logo as link which goes to #home. I would like that once this is clicked the class active is removed from the links inside the ul.menu. This way the nav elements wont remain colored in orange when #home is clicked. I’ve tried it alone but I’m a beginner with javascript.

Could you help me with this quest?

HTML:

<nav>
    <div id="logo">
        <a href="#home" class="panel"><img src="_img/logo.png" alt="DR logo" /></a>
    </div>
    <div id="categories">
        <ul class="menu">
                <li><a href="#aboutMe">ABOUT ME</a></li>
                <li><a href="#showcase">SHOWCASE</a></li>
                    <li><a href="#howWork">HOW DO I WORK</a></li>
            <li><a href="#meet">LETS MEET</a></li>  
        </ul>
    </div>
    <hr>
</nav>

CSS:

.menu li.active a {
     color: #ff530d;
}​

JQUERY:

<script type="text/javascript"> 
         var make_button_active = function()
           {
              //Get item siblings
              var siblings =($(this).siblings());
              //Remove active class on all buttons
              siblings.each(function (index)
                {
                  $(this).removeClass('active');
                }
              );

              //Add the clicked button class
              $(this).addClass('active');
            }

        var classOut = function()
            {
                $(".menu li").removeClass('active');
            }


             $(document).ready(function() {
            $(".menu li").click(make_button_active);

            $("#home").click(classOut);
        });
        </script>

Answer 1

I rewrote your entire JavaScript, does this help?

I changed your JavaScript to:

$(document).ready(function()
{

  $('.menu a').click(function(e)
  {
    e.preventDefault();
    $('.menu a').removeClass('active');
    $(this).addClass('active');        
  });

  $('#logo > a').click(function(e)
  {
    e.preventDefault();
    $('.menu a').removeClass('active');        
  });    

});

​