Jquery 单击 'Next' 按钮时选项卡突出显示

Question

我正在尝试让当前选项卡按钮在您单击 'Next' 按钮时突出显示，目前它们仅在单击选项卡时突出显示

这是代码

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

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

我正在尝试让当前选项卡按钮在您单击 'Next' 按钮时突出显示，目前它们仅在单击选项卡时突出显示

Answer 1

这里有一些提示：

在点击处理程序上使用 preventDefault
使用.activeclass到add/remove主动class
对于您的下一个按钮，您将 .active class 添加到所有 link 中，技巧是 select 正确的按钮。

最后是the fiddle

这是您下一个 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);

});

Jquery 单击 'Next' 按钮时选项卡突出显示

Jquery Tabs Highlight When Clicking 'Next' Button

html

javascript

css

jquery

tabs