在类中交换2个按钮Javascript函数

我有点困惑如何使用jquery为两个不同的项目添加活动效果

我正在使用W3垂直标签教程，但我有两个标签“链接”

1
2.
3.
一丁点儿
另一个标题
再一个

函数openTab（evt，cityName）{
变量i，tabcontent，tablinks，tabnumber；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

因此，我们的想法是将活动类添加到数字和标题中 当一个处于活动状态时

因此，如果1是活动的，那么title也应该有活动类

我不知道我该如何做到这一点

Ryan的最新信息：

<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>

01
02
03
专业的
创造力
及时

由于数字按钮和标题按钮重合，您可以使用如下索引：

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";
}

函数openTab（evt，cityName）{
让buttonIndex=-1；
const$clickedButton=$（evt.target）；//使用Jquery获取单击的按钮
const tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

document.getElementsByClassName（“tabcontent”）…没有类为tabcontent的元素！！！您还在多个元素上重复相同的id（
id=“defaultOpen”
），这是无效的<代码>id

属性值在域内必须唯一谢谢！mamun我只是想添加问题中的内容，因为切换工作正常。请使用接口，而不是将

className

值作为字符串进行操作。我要交换选项卡，但不是要添加的类。addClass（）“未解析的函数或方法addClass（）检查信息：检查调用的函数是否有效。验证工作在JavaScript、html或jsp文件中“@Someguy用我的编辑尝试一下”。我将clickedButton常量设置为Jquery对象的evt.target。快速提问Ryan您如何设置它，以便在第一次打开时只有1处于活动状态我看到它从所有3个打开的内容开始mean@Someguy，我不确定你的意思。你能进一步澄清你最近的问题吗？

<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>

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";
}