代码之家 › 专栏 › 技术社区 › Brendan

javascript选项卡替换类

getelementsbyclassname css html javascript

Brendan · 技术社区 · 8 年前

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

在我的css中,我还创建了另一个类(.now active),并为active选项卡(in class.now active)添加了样式背景色,这将被我的javascript代码调用和使用。到目前为止一切正常。

问题:我希望上面.now active类中的背景颜色样式(仅由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();

最后这是我的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()…也许我用得不对。

请帮忙解决这个问题好吗??

1 回复 | 直到 8 年前

Mathias Rechtzigel 8 年前

有几件事对你不利:

opentab函数('assignment','practice')中的第二项是区分大小写的——将其改为小写将允许文档获得正确的元素。
活动类名没有使用!其他一切都是重要的。
getelementsbyclassname创建一个类似于数组的对象,因此您需要遍历该对象或管理状态,以便只有一个项通过如下方式: var clickedElement = document.getElementsByClassName(Tab)[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');

}

https://codepen.io/MathiasaurusRex/pen/ERNPBz