Question

我一直试图在JavaScript中创建标签。单击新标签时，应将活动类别应用到该类别，并显示其关联的面板内容。但是，当单击另一个选项卡并且面板都没有变化时，不会应用活动类，它们只是堆叠在一起。

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>

Answer 1

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

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

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

最后，您不应将选项卡文本用作相应面板的类名称。当选项卡文本中有多个单词时，这将是有问题的。我所做的是使用选项卡的data属性指定面板的相对类，并将所有面板放置在div元素.panels中。现在，您可以将所需的任何文本放入选项卡，并使用data-target属性，为面板添加类名称。

JavaScript

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

CSS

.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;
}

HTML

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

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

  <body>
    <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>

  </body>
</html>

Answer 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 %}

如何在javascript中创建标签？

2 个答案: