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

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

请参阅以下评论。这将适用于任意数量的标签，而无需修改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。
处理模式时，编写一个将相同原理应用于相似情况的函数。

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

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模板）。

Answer 3

如果您正在寻找与现有代码相似的非常简单的内容，请考虑一下。

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

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

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

3 个答案: