Basically they is no need for a button all you just need is to add the class “tab-current” to any list item that was click.
<script>
$(document).ready(function (){
$('.premium-tabs-nav-list-item').click( function () {
$('.premium-tabs-nav-list-item').removeClass('tab-current') ;
$(this).addClass('tab-current');
});
}) ;
</script>
Solution 1 :
Solution 2 :
className did the trick I wanted on the appropriate selectors:
className = "premium-tabs-nav-list-item";
className = "premium-tabs-nav-list-item tab-current";
Problem :
I need to switch tabs in an HTML/CSS Tabs widget by clicking on a specific button.
For this I’m trying to aim to specific element on the page by using document.querySelector and then to remove using element.classList.remove tab-current class which makes a specific tab to be active and then add the same class using element.classList.add to another element of the widget related to another tab. But apperently I’m doing something wrong because the tabs aren’t switching with the clicked button.
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('#button a').click(function() {
document.querySelector("#premium-tabs-aa81ee4 > div.premium-tabs-nav > ul > li:nth-child(1) > a").element.classList.remove("tab-current");
document.querySelector("#premium-tabs-aa81ee4 > div:nth-child(1) > ul:nth-child(1) > li:nth-child(2)").element.classList.add("tab-current");
}
}<div id="premium-tabs-aa81ee4" class="premium-tabs premium-tabs-style-flip premium-tabs-horizontal">
<div class="premium-tabs-nav">
<ul class="premium-tabs-nav-list premium-tabs-horizontal">
<li class="premium-tabs-nav-list-item tab-current" style="pointer-events: auto;">
<a class="premium-tab-link" href="#section-flip-0-aa81ee4">
<span class="premium-tab-title">Tab 1</span> </a>
</li>
<li class="premium-tabs-nav-list-item" style="pointer-events: auto;">
<a class="premium-tab-link" href="#section-flip-1-aa81ee4">
<span class="premium-tab-title" style="color: rgb(51, 51, 51);">Tab 2</span> </a>
</li>
</ul>
</div>
</div>Comments
Comment posted by octaviandd
What does .tab-current class do?
Comment posted by Dmitry
Determines which tab’s content to show and highlights the active tab
Comment posted by Heretic Monkey
Looks like you have a syntax error in your JavaScript. Click Run code snippet.
Comment posted by Dmitry
I didn’t paste the part of the code related to the tabs’ content because I think if switching the tabs with the button will work I’ll add a couple of js lines related to triggering of tabs’ content. Thanks.
Comment posted by Dmitry
I think it’s because there’s no button in his part of code with the id #button. But could it be also the error in the querySelectors ? Thanks.
Comment posted by pppery
This would be a better answer if you explained how the code you provided answers the question.
Comment posted by Samuel Momoh
Sorry am kind of new here, since i didn’t write much code i was not expecting to explain except been ask for clarification