Question

So I currently have three unordered lists in my header. This is a single-page site that uses anchors to navigate. I need to have an “active” class to toggle between any anchor that is clicked between these three unordered lists. I still relatively new with jQuery and programming in general, but the basic structure of the page is outlined below.

<div id="header">

<div id="brands-nav">

    <h3>Brands:</h3>

    <ul class="navitems">
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchore</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
    </ul>

</div>

    <div id="mediums-nav">

    <h3>Mediums:</h3>

    <ul class="navitems">
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
    </ul>

</div>

</div>

    <div id="about-nav">

    <h3>About:</h3>

    <ul class="navitems">
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
        <li><a href="#">Anchor</a></li>
    </ul>

</div>

So, I am trying to figure out how to add an “active” class to any of those that are clicked as well as removing the active class from any cousins.

I understand the basic way to do this if all the elements are contained by the same parent with something like this…

$(document).ready(function(){

$("#mediums-nav a").click(function(){
  $(this).toggleClass("active");
  $(this).siblings("a").removeClass("active");
});

});

So how would I go about extending that to all of it’s cousins?

Answer 1

Try this:

var allAnchors = $('.navitems a').click(function(){
    allAnchors.removeClass('active');
    $(this).addClass('active');
});