Put active link with javascript?

Question

I have a javascript code, visible in this link http://jsfiddle.net/9nd4j/1272/

I am trying to put the first 3 active links at the same time, if someone clicks on "About MHG" or "Workout Programs" or "Fitness Tips", that is, click on 1 of the 3, both are active.

The rest are correct, but the first three wanted to be active at the same time. it is possible?

    <ul class="navi">
        <li><a class="menu2" href="#">About MHG</a></li>
        <li><a class="menu3" href="#">Workout Programs</a></li>
        <li><a class="menu4" href="#">Fitness Tips</a></li>
        <li><a class="menu5" href="#">Contact Us</a></li>          
        <li><a class="menu6" href="#">Read Our Blog</a></li>
      </ul>


$('ul.navi').each(function(){
        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
        $active.addClass('active');
        $content = $($active.attr('href'));

        // Hide the remaining content
        $links.not($active).each(function () {
            $($(this).attr('href')).hide();
        });

        // Bind the click event handler

        $(this).on('click', 'a', function(e){
            // Make the old tab inactive.
            $active.removeClass('active');
            $content.hide();

            // Update the variables with the new link and content
            $active = $(this);
            $content = $($(this).attr('href'));


            // Make the tab active.
            $active.addClass('active');

            $content.show();

            // Prevent the anchor's default click action
            e.preventDefault();
        });



    });

Answer 1

Inside this Handler Event: $(this).on('click', 'a', function(e){ can make a search to know the index of this anchor (actually li father).

If you know this you can know if you are one of those first 3 anchors that received the click. This step can be done with:

if ($(this).closest('li').index() < 3) // fazer o que procura

When this condition occurs you need to go through these elements and give them the class you want. Suggestion, to use when the condition above is true:

$(this).closest('ul').find('li a').each(function(i){
      if (i<3)$(this).addClass('active');
});

The steps this code takes are: part of the clicked anchor > goes up to the predecessor ul > seeks the descending anchors of elements li > walks one by one > assigns the class to anchors whose selection index is less than 3. However, as in javascript arrays start with index zero, the class is added to the indexes 0, 1 and 2.

To adapt your jsFiddle changed $active.removeClass('active'); for $links.removeClass('active'); as it takes the class of all links and not only the last clicked.

Example: http://jsfiddle.net/9nd4j/1282/

Links about some methods used:

• index() - returns the index relative to the collection elements
• Closest() - returns the first ancestor who matches with the selector
• find() - returns the descending elements that match with the selector
• each() - traverse all elements of the collection passing the index as the first argument