如何使我的选项卡中的活动按钮具有“活动”类？

Question

我需要你的帮助。

我必须根据处于活动状态的选项卡在按钮中添加“活动”类（我是 javascript 新手）我使用的是纯 javascript。

HTML：

<button class="buttonTab" id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</button>
<button class="buttonTab" id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</button>

<br />

<div class="contentTab" id="tab1Content" style="display: block;">
     This is the content.
</div>
<div class="contentTab" id="tab2Content" style="display: none;">
     This is the content2.
</div>

CSS：

.buttonTab {
   color: #FFFFFF;
   background-color: #333333;
}
.buttonTab.active {
   color: #333333;
   background-color: #FFFFFF;
}

JavaScript：

function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById('tab1Content').style.display="none";
document.getElementById('tab2Content').style.display="none";

//Show the Selected Tab
document.getElementById('tab' + tabIndex + 'Content').style.display="block";  
}

希望你能帮助我，谢谢。

Answer 1

您可以在元素的 classList 中添加/删除类。

function selectTab(tabIndex) {
//Hide All Tabs
document.getElementById('tab1Content').style.display="none";
document.getElementById('tab2Content').style.display="none";

//Show the Selected Tab
document.getElementById('tab' + tabIndex + 'Content').style.display="block";  
if(tabIndex==1){
document.getElementById('tab' + 2 ).classList.remove("active");
}
else if(tabIndex==2){
document.getElementById('tab' + 1 ).classList.remove("active");
}
document.getElementById('tab' + tabIndex ).classList.add("active");
}

.buttonTab {
   color: #FFFFFF;
   background-color: #333333;
}
.buttonTab.active {
   color: #333333;
   background-color: #FFFFFF;
}

<button class="buttonTab" id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</button>
<button class="buttonTab" id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</button>

<br />

<div class="contentTab" id="tab1Content" style="display: block;">
     This is the content.
</div>
<div class="contentTab" id="tab2Content" style="display: none;">
     This is the content2.
</div>

Answer 2

如果您正在寻找与现有代码平行的非常简单的东西，请考虑这一点。

请注意，这不是最有效的代码，它与您现有的代码最相似。捕获一个节点列表中的所有选项卡并像在其他帖子中一样循环它们肯定是更实用的方法。

function selectTab(tabIndex) {
  //Hide All Tabs
  document.getElementById("tab1Content").style.display = "none";
  document.getElementById("tab2Content").style.display = "none";

  // Remove active class  all tabs
  document.getElementById("tab1").classList.remove("active");
  document.getElementById("tab2").classList.remove("active");

  //Show the Selected Tab
  document.getElementById("tab" + tabIndex + "Content").style.display = "block";
  //Activate clicked tab
  document.getElementById("tab" + tabIndex).classList.add("active");
}

Answer 3

要从元素中添加/删除类，应该使用在元素的classList 上定义的add() 和remove() 方法。

请参阅下面的 cmets。这将适用于任意数量的选项卡，而无需修改 JavaScript。

function selectTab(tabIndex) {
  let tabContentDivs = document.querySelectorAll(".contentTab"),
    tabButtons = document.querySelectorAll(".buttonTab");

  // display: none; to all tabContentDivs
  for (var i = 0; i < tabContentDivs.length; i++) {
   tabContentDivs[i].style.display = 'none';
  }
  // display: block; to current tab
  document.getElementById('tab' + tabIndex + 'Content').style.display = "block";

  // remove active class from all buttons
  for (var i = 0; i < tabButtons.length; i++) {
   tabButtons[i].classList.remove('active');
  }
  // add active class to current button
  document.getElementById('tab' + tabIndex).classList.add('active');
}

.buttonTab {
  color: #FFFFFF;
  background-color: #333333;
}

.buttonTab.active {
  color: #333333;
  background-color: #FFFFFF;
}

<button class="buttonTab active" id="tab1" onClick="JavaScript:selectTab(1);">Tab 1</button>
<button class="buttonTab" id="tab2" onClick="JavaScript:selectTab(2);">Tab 2</button>

<br />

<div class="contentTab" id="tab1Content" style="display: block;">
  This is the content.
</div>
<div class="contentTab" id="tab2Content" style="display: none;">
  This is the content2.
</div>

---

但是，恕我直言，您的代码目前最大的问题是它过于实用。您必须为每个按钮指定onclick 回调，还需要手动硬编码tabIndex。

为什么不找到一个模式并根据它们在父项中的位置将按钮连接到选项卡容器（无论如何你都会这样做，但是通过硬编码，而不是自动执行）。

我认为应该是这样的。 DRY.
当您处理模式时，请编写一个将相同原理应用于类似情况的函数。

在您的示例中，ids 并不是真正需要的。您可以在按钮和容器之间建立一对一的关系，并根据父级中的当前位置引用它们（我对两个组都使用了容器）：

function selectTab(tabIndex) {
  let tabContentDivs = document.querySelectorAll(".tabContainers > div"),
    tabButtons = document.querySelectorAll(".tabButtons > button");

  for (var i = 0; i < tabContentDivs.length; i++) {
    tabContentDivs[i].removeAttribute('style');
  }
  document.querySelector('.tabContainers').children[tabIndex].style.display = "block";

  for (var i = 0; i < tabButtons.length; i++) {
    tabButtons[i].classList.remove('active');
  }
  document.querySelector('.tabButtons').children[tabIndex].classList.add('active');
}

document.querySelector('.tabButtons').addEventListener('click', function(e) {
  let button = e.target.closest('button'),
    index = button ? Array.from(button.parentNode.children).indexOf(button) : -1;
  if (index > -1)
    selectTab(index);
})

.tabButtons button {
  color: #FFFFFF;
  background-color: #333333;
}

.tabButtons .active {
  color: #333333;
  background-color: #FFFFFF;
}

.tabContainers>div {
  display: none;
}

<div class="tabButtons">
  <button class="active">Tab 1</button>
  <button>Tab 2</button>
  <button>Tab 3</button>
  <button>Tab 4</button>
  <button>Tab 5</button>
  <button>Tab 6</button>
  <button>Tab 7</button>
</div>

<div class="tabContainers">
  <div style="display: block;">This is the content 1.</div>
  <div>This is the content 2.</div>
  <div>This is the content 3.</div>
  <div>This is the content 4.</div>
  <div>This is the content 5.</div>
  <div>This is the content 6.</div>
  <div>This is the content 7.</div>
</div>

作为一个经验法则：每当您发现自己为两个不同的元素编写同一行代码时，问问自己：“我可以让这段代码在两个地方都使用吗？”

优点：

• 您的代码现在可以无缝扩展（只需添加新按钮和新选项卡容器，它们就会连接起来，无需接触 JavaScript）
• 您可以轻松添加新的侦听器以使其在触控设备上工作（您需要为触控设备绑定不同的事件），而无需修改标记（HTML 模板）。