jQuery tabs: how to addClass to a separate UL tab from the tab div?

Question

I am trying to set up a tabs nav with jQuery without using the jQuery Tabs UI. From what I understand, when the user clicks the list element, the code

• grabs the list element with data-tab="X" and adds the class current which will set the opacity: 1 for that link (default: 50%),
• then removes the current class from the tabs content section and displays the corresponding div with the same data-tab attribute.

I tried to replicate the same process with a button click. This seems to work as it removes the current class from the .tab-link classes, but doesn't add the current class to the corresponding ul.tabs li element. This creates a confusing UX as it's not clear what section/tab is active/current when the user presses the next/previous buttons.

How can I add the current class to the corresponding ul.tabs li when I click the next and previous buttons? Is this a jQuery issue or a CSS issue?

 $(document).ready(function () { $('ul.tabs li').click(function () { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); }); $('button.next-previous').click(function () { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); $('li').find('ul:first').addClass('moveme'); $('html, body').animate({ scrollTop: $("#tabsNav").offset().top }, 2000); }); });

 :root { --darkgreen: #203631; --background: #f5f5f5; --pinkaccent: #f49393; --white: #fff; --black: #000; }.formButton { display: inline-block; border-radius: 4px; background-color: var(--pinkaccent); border: none; color: #ffffff; text-align: center; font: italic 600 18px var(--secondfont); padding: 1rem 2rem; margin-top: 10px; cursor: pointer; }.checkoutNumbers { width: 30px; height: 30px; } /*-------------------------------------------------------------- # My Account - Tabs --------------------------------------------------------------*/ /*/Links/buttons container /*/ ul.tabs { display: block; margin: 0 auto; text-align: center; padding: 0px; list-style: none; } /*/Login & Register Links/*/ ul.tabs li { background: none; text-align: center; color: var(--darkgreen); font-family: var(--mainfont); display: inline-block; padding: 10px 15px; margin: 0 auto; font-size: 2rem; opacity: 50%; cursor: pointer; } /*/Current and selected link/*/ ul.tabs li.current { opacity: 1; } /*/Content Class/*/.tab-content { display: none; padding: 15px; animation: fadeEffect 1.5s; } /*/Current Content Class/*/.tab-content.current { display: inherit; } /* Go from zero to full opacity */ @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="tabsNav"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1" data-tab=""> <span>Billing</span> </li> <li class="tab-link" data-tab="tab-2"> <span>Delivery<span> </li> <li class=" tab-link" data-tab="tab-3"> <span>Review &amp; Payment</span> </li> </ul> </div> <.--Tabs Content--> <div id="tab-1" class="tab-content current"> <p>Billing tab.</p> <button data-tab="tab-2" class="next-previous formButton checkout">Continue</button> </div> <div id="tab-2" class="tab-content"> <p>Delivery Tab</p> <button data-tab="tab-3" class="next-previous formButton checkout ">Continue</button> <button data-tab="tab-1" class="next-previous formButton checkout">Back</button> </div> <div id="tab-3" class="tab-content"> <p>Payment tab.</p> </div>

Answer 1

You just need to select the li with the data-tab with your tab_id, eg

$("*[data-tab=\"" + tab_id+"\"").addClass('current');

This uses the tab_id variable you create and looks for an element with the data-tab value set to this, eg data-tab="tab-2"

You can see it working here:

 $(document).ready(function () { $('ul.tabs li').click(function () { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); }); $('button.next-previous').click(function () { var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); /* find the li that has a data-tab attribute matching this tab_id*/ $("*[data-tab=\"" + tab_id+"\"").addClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#" + tab_id).addClass('current'); $('li').find('ul:first').addClass('moveme'); $('html, body').animate({ scrollTop: $("#tabsNav").offset().top }, 2000); }); });

 :root { --darkgreen: #203631; --background: #f5f5f5; --pinkaccent: #f49393; --white: #fff; --black: #000; }.formButton { display: inline-block; border-radius: 4px; background-color: var(--pinkaccent); border: none; color: #ffffff; text-align: center; font: italic 600 18px var(--secondfont); padding: 1rem 2rem; margin-top: 10px; cursor: pointer; }.checkoutNumbers { width: 30px; height: 30px; } /*-------------------------------------------------------------- # My Account - Tabs --------------------------------------------------------------*/ /*/Links/buttons container /*/ ul.tabs { display: block; margin: 0 auto; text-align: center; padding: 0px; list-style: none; } /*/Login & Register Links/*/ ul.tabs li { background: none; text-align: center; color: var(--darkgreen); font-family: var(--mainfont); display: inline-block; padding: 10px 15px; margin: 0 auto; font-size: 2rem; opacity: 50%; cursor: pointer; } /*/Current and selected link/*/ ul.tabs li.current { opacity: 1; } /*/Content Class/*/.tab-content { display: none; padding: 15px; animation: fadeEffect 1.5s; } /*/Current Content Class/*/.tab-content.current { display: inherit; } /* Go from zero to full opacity */ @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="tabsNav"> <ul class="tabs"> <li class="tab-link current" data-tab="tab-1" data-tab=""> <span>Billing</span> </li> <li class="tab-link" data-tab="tab-2"> <span>Delivery<span> </li> <li class=" tab-link" data-tab="tab-3"> <span>Review &amp; Payment</span> </li> </ul> </div> <.--Tabs Content--> <div id="tab-1" class="tab-content current"> <p>Billing tab.</p> <button data-tab="tab-2" class="next-previous formButton checkout">Continue</button> </div> <div id="tab-2" class="tab-content"> <p>Delivery Tab</p> <button data-tab="tab-3" class="next-previous formButton checkout ">Continue</button> <button data-tab="tab-1" class="next-previous formButton checkout">Back</button> </div> <div id="tab-3" class="tab-content"> <p>Payment tab.</p> </div>