Замена в классах на 2 кнопки Javascript функция

Question

Немного озадачен тем, как добавить эффект Active к 2 различным элементам, используя jquery.

. Для этого я использую учебник по вертикальным вкладкам w3schools, но у меня есть 2 вкладки "Ссылки"

 <button class="tablinks" onclick="openTab(event, 'PRO')" id="defaultOpen">1</button>
 <button class="tablinks" onclick="openTab(event, 'CREAT')" id="defaultOpen">2</button>
 <button class="tablinks" onclick="openTab(event, 'TIM')" id="defaultOpen">3</button>


<button class="tablinks-title" onclick="openTab(event, 'PRO')" id="defaultOpen">A tittle</button>
<button class="tablinks-title" onclick="openTab(event, 'CREAT')">Another Title</button>
<button class="tablinks-title" onclick="openTab(event, 'TIM')">One More</button>

   function openTab(evt, cityName) {
        var i, tabcontent, tablinks, tabnumber;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks-title");
        tabnumber = document.getElementsByClassName("tablinks-title");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
            tabnumber[i].className = tabnumber[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";

    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();

Таким образом, идея состоит в том, чтобы добавить активный класс к числу и названию, когда он активен.

Так что, если 1 активен, у титула также должен быть активный класс.

Не знаю, как мне этого добиться.

Обновление для Райана:

<div class="side-tab col-md-2">
    <div class="row">
  <div class="tab-number col-md-6">
      <button class="tablinks lightnumber1" onclick="openTab(event, 'PRO')" id="defaultOpentitle">01</button>
      <button class="tablinks lightnumber" onclick="openTab(event, 'CREAT')">02</button>
      <button class="tablinks lightnumber" onclick="openTab(event, 'TIM')">03</button>
  </div>
    <div class="tab-title col-md-6">
        <button class="tablinks-title highlight1" onclick="openTab(event, 'PRO')" id="defaultOpen">PROFESSIONAL</button>
        <button class="tablinks-title highlight" onclick="openTab(event, 'CREAT')">CREATIVITY</button>
        <button class="tablinks-title highlight" onclick="openTab(event, 'TIM')">TIMELY</button>
    </div>
    </div>
</div>
    <div class="TabbedContent col-md-10">
        <div id="PRO" class="tabcontent">
            <?php
            echo do_shortcode('[smartslider3 slider=3]');
            ?>

        </div>

        <div id="CREAT" class="tabcontent">
            <?php
            echo do_shortcode('[smartslider3 slider=4]');
            ?>
        </div>

        <div id="TIM" class="tabcontent">
            <?php
            echo do_shortcode('[smartslider3 slider=5]');
            ?>
        </div>
    </div>

Answer 1

Поскольку ваша кнопка для номера и кнопка для заголовка совпадают, вы можете использовать индекс следующим образом:

function openTab(evt, cityName) {
    let buttonIndex = -1;
    const $clickedButton = $(evt.target); //Using Jquery to get the button which was clicked
    const tabcontent = document.getElementsByClassName("tabcontent");

    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

 if($clickedButton.hasClass('tablinks')){
     $('.tablinks').each(function(i, el){ 
         if($(el).is($clickedButton)){
            buttonIndex = i;
            return false; //break from the each now that we have the button index
         }
     });
 } else {
     $('.tablinks-title').each(function(i, el){ 
         if($(el).is($clickedButton)){
            buttonIndex = i;
            return false; //break from the each now that we have the button index
         }
     });
 }

 //Remove active class from buttons before adding to newly selected
 $('.tablinks').removeClass('active');
 $('.tablinks-title').removeClass('active');

 //Add the active class to the corresponding buttons at the clicked index for both
 //Number and title
 $($('.tablinks')[buttonIndex]).addClass('active');
 $($('.tablinks-title')[buttonIndex]).addClass('active');

 document.getElementById(cityName).style.display = "block";
}