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, e.g.

$("*[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, e.g. 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>