如何用纯JS制作标签页？

Question

我正在尝试仅使用纯 JS CSS 和 HTML 制作一个“选项卡”菜单，基本上我有 7 个带有内容的 div 和 7 个应该打开匹配 div 的“按钮”。我想要使​​用的策略是将所有具有“隐藏”或“显示：无”属性的 div 堆叠在同一位置，然后，当我单击按钮时，它将 \xc2\xb4s 匹配的 div 变为可见。我面临的问题是如何告诉按钮应该打开哪个div（使用数组而不是手动执行），以及当我单击其他div时如何将其设置回不可见（我正在考虑一个if()如果所选按钮的编号与 div 的编号匹配，则仅打开可见性，但据说每个按钮都有一个 div，所以我很困惑）。

\n

Answer 1

我想你想要这样的东西吗？

document.addEventListener('click', ({ target: { dataset: { id = '' }}}) => {
  if (id.length > 0) {
    document.querySelectorAll('.tab').forEach(t => t.classList.add('hidden'));
    document.querySelector(`#${id}`).classList.remove('hidden');
  }
});

.hidden {
  display:none;
}

<button data-id="tab1">tab 1</button>
<button data-id="tab2">tab 2</button>
<div id="tab1" class="tab">Tab 1</div>
<div id="tab2" class="tab hidden">Tab 2</div>

但现实是我们可能不想实际使用button. 那么让我们改变一下吧。

const tabClick = ({ target }) => {
    const { dataset: { id = '' }} = target;
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('selected'));
    target.classList.add('selected');
    document.querySelectorAll('.tab-panel').forEach(t => t.classList.add('hidden'));
    document.querySelector(`#${id}`).classList.remove('hidden');
};

const bindTabs = () => {
  document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', tabClick);
  })
};

// Belts and braces, lets ensure our DOM is loaded and only assign click to the `tabs`
document.addEventListener('DOMContentLoaded', () => {
  bindTabs();
});

.tab {
  display: inline-block;
  background-color: grey;
  padding: 0.75rem;
  color: #fff;
}

.selected {
  background-color: black;
}

.tab-panel {
  
  border: 2px solid black;
  min-height: 50px;
  max-width: 250px;
  padding: 1rem;
}

.hidden {
  display:none;
}

<div data-id="tab1" class="tab selected">tab 1</div>
<div data-id="tab2" class="tab">tab 2</div>
<div data-id="tab3" class="tab">tab 3</div>
<div data-id="tab4" class="tab">tab 4</div>
<div id="tab1" class="tab-panel">Tab 1</div>
<div id="tab2" class="tab-panel hidden">Tab 2</div>
<div id="tab3" class="tab-panel hidden">Tab 3</div>
<div id="tab4" class="tab-panel hidden">Tab 4</div>

那么我们如何用basicjavascript 来解决这个问题呢？

const tabCount = 4; // If we add a new tab, increase.

const tabClick = (event) => {
    const tabButtonClicked = event.target;
    const id = event.target.dataset.id;
    
    // First remove selected and hide all tabs
    for(let i = 1; i <= tabCount; i++) {
      let tabButtonID = "#tabButton" + i;
      let tabButton = document.querySelector(tabButtonID);
      let tabID = "#" + tabButton.dataset.id;
      let tab = document.querySelector(tabID);
      tabButton.classList.remove("selected");
      tab.classList.add("hidden");
    }
    
    // Now we set selected and show the selected tab.
    document.querySelector("#" + id).classList.remove("hidden");
    tabButtonClicked.classList.add("selected");
};

const bindTabs = () => {
  // Loop through number of tabs and add a click event.
  for(let i = 1; i <= tabCount; i++) {
    let tabButtonID = "#tabButton" + i;
    let tabButton = document.querySelector(tabButtonID);
    tabButton.addEventListener('click', tabClick);
  }
};

// Belts and braces, lets ensure our DOM is loaded and only assign click to the `tabs`
document.addEventListener('DOMContentLoaded', () => {
  bindTabs();
});

.tab {
  display: inline-block;
  background-color: grey;
  padding: 0.75rem;
  color: #fff;
}

.selected {
  background-color: black;
}

.tab-panel {
  
  border: 2px solid black;
  min-height: 50px;
  max-width: 250px;
  padding: 1rem;
}

.hidden {
  display:none;
}

<div id="tabButton1" data-id="tab1" class="tab selected">tab 1</div>
<div id="tabButton2" data-id="tab2" class="tab">tab 2</div>
<div id="tabButton3" data-id="tab3" class="tab">tab 3</div>
<div id="tabButton4" data-id="tab4" class="tab">tab 4</div>
<div id="tab1" class="tab-panel">Tab 1</div>
<div id="tab2" class="tab-panel hidden">Tab 2</div>
<div id="tab3" class="tab-panel hidden">Tab 3</div>
<div id="tab4" class="tab-panel hidden">Tab 4</div>