单击“下一步”按钮时，jQuery选项卡突出显示

Question

I'm trying to get the current tab buttons to highlight when you click the 'Next' button, so far they only highlight when clicking on the tabs

Here is the code

  $(document).ready(function() { //First we make sure to only show the first section $('header').children('section').hide(); $('header').children('section').first().show(); //When we click a link do this.. $('nav ul li a').click(function(){ //Makes sure the active tab gets a different color $('nav ul li a').removeClass('active'); $(this).addClass('active'); //we pull out the href Eg #tab2 var href = $(this).attr('href'); //We slide up all sections and only reveal the one we clicked Eg #tab2 $('header').children('section').slideUp(200); $(href).delay(200).slideDown(200); }); // TRYING TO GET THE CURRENT TAB TO HIGHLIGHT WHEN I CLICK 'Next' $('section a').click(function(){ $('nav ul li a').removeClass('active'); $('nav ul li a').addClass('active'); var href = $(this).attr('href'); $('header').children('section').slideUp(200); $(href).delay(200).slideDown(200); }); }); 

 .active{ background-color: lightgrey; } 

  <nav> <ul> <li><a class="active" href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <li><a href="#tab4">Tab 4</a></li> <li><a href="#tab5">Tab 5</a></li> <li><a href="#tab6">Tab 6</a></li> </ul> </nav> <header> <section id="tab1"> This is the content to be displayed in TAB ONE!<br> This is another line just for testing its flexibility! <a href="#tab2">Next</a> </section> <section id="tab2"> This is the content to be displayed in TAB TWO! <a href="#tab3">Next</a> </section> <section id="tab3"> This is the content to be displayed in TAB THREE! <a href="#tab4">Next</a> </section> <section id="tab4"> This is the content to be displayed in TAB FOUR!<br> This is another line just for testing its flexibility! <a href="#tab5">Next</a> </section> <section id="tab5"> This is the content to be displayed in TAB FIVE! <a href="#tab6">Next</a> </section> <section id="tab6"> This is the content to be displayed in TAB SIX! </section> </header> 

I'm trying to get the current tab buttons to highlight when you click the 'Next' button, so far they only highlight when clicking on the tabs

Answer 1

Here are some hints:

• Use preventDefault on click handler
• Use the .active class to add/remove active class
• For your next button, you were adding the .active class to ALL of your links, the trick was to select the right one.

Finally, here is the fiddle

And here is the code for your next link

$('section a').click(function(e){
e.preventDefault();
     $('.active').removeClass('active').parent().next().children().first().addClass('active');

    var href = $(this).attr('href');

    $('header').children('section').slideUp(200);

    $(href).delay(200).slideDown(200);

});