Jquery вкладки Выделите При нажатии кнопки «Далее»

Question

Я пытаюсь получить текущие кнопки табуляции, чтобы выделить при нажатии на кнопку «Далее», до сих пор они подчеркивают только при нажатии на вкладках

Вот код

\t \t $(document).ready(function() { 
 
\t 
 
\t //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); 
 
\t 
 
}); 
 
});

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

Я пытаюсь получить текущие кнопки табуляции, чтобы выделить при нажатии на кнопку «Далее», до сих пор они подчеркивают только при нажатии на вкладках

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

});