Put active link with javascript?

Question

Put active link with javascript?

Navigation

#1 by (2 votes)

2

I have a code in javascript, visible in this link link

I'm trying to put the first 3 active links simultaneously, 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 intended to be active simultaneously. is it 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();
        });



    });

javascript html jquery

asked by anonymous 05.08.2014 / 11:37

1 answer

Query about query performance with date range Improved Hibernate performance

score 2 · Accepted Answer

Within this event handler: $(this).on('click', 'a', function(e){ can search to find out what the index of this anchor is (actually from li parent).

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

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

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

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

The steps that this code gives are: part of the anchor clicked > goes to the predecessor ul > looks for the descendant anchors of elements li > scrolls one by one > assigns the class to the anchors whose selection index is less than 3. Since in javascript the arrays begin with index zero, the class is added to the indexes 0, 1, and 2.

In order to adapt your jsFiddle, I have changed $active.removeClass('active'); to $links.removeClass('active'); since it strips the class of all the links and not just the last click.

Example: link

Links to some methods used:

index () - returns the index relative to the elements of the collection
closest () - returns the first ancestor that matches the selector
find () - returns descending elements that match the selector
each () - traverses all elements of the collection by passing the index as the first argument