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

Question

当您点击“下一步”时，我试图让当前的标签按钮突出显示按钮，到目前为止，它们仅在单击选项卡时突出显示

这是代码

＆＃13;

＆＃13;

		$(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 E.g #tab2
    var href = $(this).attr('href');
  
    //We slide up all sections and only reveal the one we clicked E.g #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);
	
});
});

＆＃13;

.active{
  background-color: lightgrey;
}

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

当您点击“下一步”时，我试图让当前的标签按钮突出显示按钮，到目前为止，它们仅在单击选项卡时突出显示

Answer 1

以下是一些提示：

• 在点击处理程序
上使用preventDefault
• 使用.active类添加/删除活动类
• 对于您的下一个按钮，您将.active课程添加到所有链接中，诀窍是选择正确的课程。

最后，这里是the fiddle

以下是您下一个链接的代码

$('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);

});