javascript - 在 2 个按钮上的类中交换 Javascript 函数

Question

有点困惑如何使用 jquery 将 Active 效果添加到 2 个不同的项目。

我正在使用 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";
}