JavaScript选项卡替换类

我在CSS中为每个选项卡创建了不同的类，并为每个选项卡添加了样式背景色。我编写了一个JavaScipt代码来遍历每个选项卡，并显示该选项卡的适当内容

在我的CSS中，我还创建了另一个类（.now-active），并为活动选项卡（In-class.now-active）添加了样式-背景色，我的JavaScript代码将调用和使用该选项卡。到目前为止，一切正常

问题：我希望上面的.now活动类中的背景色样式（仅由我的JavaScript onClick函数调用）替换当前活动选项卡的初始样式（背景色）

这是我的每个选项卡的CSS类：

 /* Set CSS property for every button */
.tab button.all{
  background-color: #fff !important;
  color: #000 !important;
}

.tab button.assessment{
  background-color: #616161 !important;
  color: #fff !important;
}

.tab button.games{
  background-color: #00bcd4 !important;
  color: #000 !important;
}

.tab button.assignment{
  background-color: #607d8b !important;
  color: #fff !important;
}

.tab button.practice{
  background-color: #009688 !important;
  color: #fff !important;
}

这是JavaScript代码要使用的活动选项卡的CSS：

/* Create an active/current tablink class */
.tab button.now-active {
    background-color: green;
}

这是我用于操作选项卡的JavaScript代码：

function openTab(evt, Tab) {
    var i, tabcontent, tablinks;

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

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {

        tablinks[i].className = tablinks[i].className.replace(" now-active", "");
    }

    var now_active = document.getElementsByClassName("now-active");

    document.getElementById(Tab).style.display = "block"
    evt.currentTarget.className += " now-active";
}

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

函数openTab（evt，Tab）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

最后这是我的HTML：

  <div class="penfs-bar hover-text tab penfs-hide-small penfs-hide-medium">
      <button class="tablinks all" onclick="openTab(event, 'All')" id="defaultOpen" style="width:20%">
          <p class="penfs-text-blue">View All</p>
      </button>

      <button class="tablinks assessment" onclick="openTab(event, 'Assessment')" style="width:20%">
          <p class="penfs-text-white">Assessment</p>
      </button>

      <button class="tablinks games" onclick="openTab(event, 'Games')" style="width:20%">
          <p class="penfs-text-white">Play Games</p>
      </button>

      <button class="tablinks assignment" onclick="openTab(event, 'Assignment')" style="width:20%">
          <p class="penfs-text-white">Assignment</p>
      </button>

      <button class="tablinks practice" onclick="openTab(event, 'Practice')" style="width:20%">
          <p class="penfs-text-white">Practice</p>
      </button>
 </div>

查看全部

评估

玩游戏

作业

实践

我尝试过的方法：split（）、replace（）、removeClass（）。。也许我没有正确地使用它们

---

请提供有关如何解决此问题的帮助？？？

有两件事对您不利：

openTab函数中的第二项（'Assignment'，'Practice'）区分大小写——将其更改为小写将允许文档获得正确的元素

活动类名未使用！重要的属性，而其他一切都是

getElementsByClassName创建了一个类似数组的对象，因此您需要迭代该对象，或者管理状态，以便通过类似这样的方式只有1项：

var clickedElement=document.getElementsByClassName（选项卡）[0]

我把所有其他的东西都剥离出来，放在一个密码笔里——希望这有帮助：

function openTab(evt, Tab) {
    var previousElement = document.getElementsByClassName('now-active')[0];
    var clickedElement = document.getElementsByClassName(Tab)[0];

    if(previousElement){
      previousElement.classList.remove('now-active');  
    }

    clickedElement.classList.add('now-active');

}

---

谢谢。我会试试这个，然后再报告。哇，我很惊讶。就像你说的，错误是-没有放！关于活动CSS类的重要信息。谢谢你的帮助