如何在javascript中创建标签？答案

【问题标题】：How to create tabs in javascript?如何在javascript中创建标签？
【发布时间】：2019-07-10 10:26:41
【问题描述】：

我一直在尝试在 JavaScript 中创建选项卡。当点击一个新标签时，活动类应该被应用到它并且它的相关面板内容应该被显示出来。但是，当单击另一个选项卡并且面板也没有改变时，不会应用 active 类，它们只是堆叠在一起。

const tabs = document.querySelector(".tabs");
const active = document.querySelector(".active");
const panel = document.querySelector(".panel");

function onTabClick(event) {

  // deactivate existing active tabs and panel
  active.classList.remove('.active');

  for (let i = 0; i < panel.length; i++) {
    panel[i].style.display = "none";
  }


  // activate new tabs and panel
  event.target.classList.add('.active');
  let classString = event.target.innerHTML;
  console.log(classString);
  document.getElementsByClassName(classString)[0].style.display = "block";
}

tabs.addEventListener('click', onTabClick, false);

.tabs {
  display: flex;
  justify-content: space-around;
  margin: 20px 2px 40px 2px;
  height: 40px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}

.tabs>* {
  width: 100%;
  color: dimgray;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs>*:hover:not(.active) {
  background-color: rgb(220, 220, 220);
}

.tabs>.active {
  color: white;
  background-color: #4CAF50;
}

.panel {
  display: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div class="tabs">
    <div class="tab active">List</div>
    <div class="tab">Grid</div>
    <div class="tab">something</div>
  </div>
  <div class="Lists panel" style='display:block'>
    panel 1 text
  </div>
  <div class="Grid panel">
    panel 2 text
  </div>
  <div class="something panel">
    panel 3 text
  </div>

</body>

</html>

【问题讨论】：

标签： javascript html css tabs

【解决方案1】：

在您的 JavaScript 中，当获取特定类的所有元素时，document.querySelecto(".className") 仅获取给定类的第一个元素。要获取所有元素，您必须使用document.querySelectorAll(".className")。

然后，当从元素中添加或删除类时，您不要将点放在类名之前。所以应该是tab[i].classList.remove("active");，而不是tab[i].classList.remove(".active");。

另外，我没有显式隐藏面板元素，而是使用了active 类，该类将应用于与面板相关的选项卡。

最后，您不应该使用选项卡文本作为相应面板的类名。当标签文本中有多个单词时，这将是一个问题。我所做的是使用选项卡的数据属性来指定面板的相关类并将所有面板放在div 元素.panels 中。现在您可以在选项卡中放置您想要的任何文本，并使用data-target 属性，放置面板的类名。

const tabs = document.querySelectorAll(".tabs");
const tab = document.querySelectorAll(".tab");
const panel = document.querySelectorAll(".panel");

function onTabClick(event) {

  // deactivate existing active tabs and panel

  for (let i = 0; i < tab.length; i++) {
    tab[i].classList.remove("active");
  }

  for (let i = 0; i < panel.length; i++) {
    panel[i].classList.remove("active");
  }


  // activate new tabs and panel
  event.target.classList.add('active');
  let classString = event.target.getAttribute('data-target');
  console.log(classString);
  document.getElementById('panels').getElementsByClassName(classString)[0].classList.add("active");
}

for (let i = 0; i < tab.length; i++) {
  tab[i].addEventListener('click', onTabClick, false);
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin: 20px 2px 40px 2px;
  height: 40px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}

.tabs>* {
  width: 100%;
  color: dimgray;
  height: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs>*:hover:not(.active) {
  background-color: rgb(220, 220, 220);
}

.tabs>.active {
  color: white;
  background-color: #4CAF50;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

<div class="tabs">
  <div class="tab active" data-target="Lists">Lists</div>
  <div class="tab" data-target="Grid">Grid</div>
  <div class="tab" data-target="Something">Something</div>
</div>
<div id="panels">
  <div class="Lists panel active">
    panel 1 text
  </div>
  <div class="Grid panel">
    panel 2 text
  </div>
  <div class="Something panel">
    panel 3 text
  </div>
</div>

【讨论】：

【解决方案2】：

let overlayTabs = document.querySelectorAll(".left-tab-overlay li")
let overlayTabId = document.querySelectorAll('.main-nav-tab')
let tabContent = document.querySelectorAll(".panel-collapse")
overlayTabs.forEach(data => {
  data.parentNode.firstChild.classList.add("active")
  data.addEventListener('click', function(e) {
    const id = e.currentTarget.dataset.id
    if (id) {
      overlayTabId.forEach(data => {
        data.classList.remove("active")
      })
      e.target.classList.add("active");
      tabContent.forEach(data => {
        data.classList.remove("in")
      });
      const element = document.getElementById(id);
      element.classList.add("in")
    }
  });
});

Yoou can use foreach loops with tabs to dynamically toggle using active class

<!--loop here in html for tabs-->
{% for tabsitem in item.tabs %}
<li data-id="{{tabsitem.id}}" class="main-nav-tab"><a data-toggle="tab">{{tabsitem.text}}</a></li>
{% endfor %}
<!--loop here in html  for tabs bootstrap tab ref-->
<div class="tab-content">
  {% for item in itemblock %}
  <div class="tab-pane">
    <div id="{{item.id}}" class="panel-collapse collapse in">
      my content
    </div>
  </div>
  {% endfor %}

【讨论】：