使用 vanilla Javascript 单击时显示相应的选项卡内容

Question

我一直在尝试用 vanilla JS 构建一个基本的标签系统。我正在使用 for 循环，以便在单击选项卡时添加活动的类。这很好，但现在我需要在下面显示相应的 tab-content 元素。我尝试使用相同的方法，例如将以下内容添加到 switchClass 函数： tabContents.classList.remove("show-content"); tabContents.classList.add("显示内容");

但这并没有按预期工作。

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

const tabContents = document.querySelector(".tab-content");

for (let i = 0; i < tabs.length; i++) {

  const tab = tabs[i];

  tab.addEventListener("click", switchClass);

}

function switchClass(e) {

  for (let i = 0; i < tabs.length; i++) {

    const tab = tabs[i];

    tab.classList.remove("active");

    tabContents.classList.remove("show");

  }

  e.target.classList.add("active");

  tabContents.classList.add("show");

}

ul {

  margin: 0;

  padding: 0;

}

.tab {

  display: inline-block;

  border: 1px solid lightgrey;

  padding: 10px;

  cursor: pointer;

}

.active {

  background: lightgrey;

}

.tab-content {

  display: none;

  padding: 10px;

}

.show-content {

  display: block;

  background: lightgray;

}

<ul>

  <li class="tab active">Tab 1</li>

  <li class="tab">Tab 2</li>

  <li class="tab">Tab 3</li>

</ul>

<div class="tab-content show-content">

  <p>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  </p>

</div>

<div class="tab-content">

  <p>Phasellus aliquam orci neque, non varius quam gravida vel.</p>

</div>

<div class="tab-content">

  <p>

    Vivamus iaculis est in sapien congue, ac condimentum.

  </p>

</div>

Answer 1

您需要找到单击的选项卡的索引，然后使用它来显示相同索引处的内容。使用querySelectorAll代替querySelector（这只会选择一个元素）该类名为show-contentnot&nbsp;show。删除show-contentfor 循环中的类。在其父元素中查找单击元素的索引。使用该索引选择相应的内容。const tabs = document.querySelectorAll(".tab");const tabContents = document.querySelectorAll(".tab-content");for (let i = 0; i < tabs.length; i++) {&nbsp; const tab = tabs[i];&nbsp; tab.addEventListener("click", switchClass);}function switchClass(e) {&nbsp; for (let i = 0; i < tabs.length; i++) {&nbsp; &nbsp; const tab = tabs[i];&nbsp; &nbsp; tab.classList.remove("active");&nbsp; &nbsp; tabContents[i].classList.remove("show-content");&nbsp; }&nbsp;&nbsp;&nbsp; const index = Array.prototype.slice.call(e.target.parentElement.children).indexOf(e.target)&nbsp; e.target.classList.add("active");&nbsp; tabContents[index].classList.add("show-content");}ul {&nbsp; margin: 0;&nbsp; padding: 0;}.tab {&nbsp; display: inline-block;&nbsp; border: 1px solid lightgrey;&nbsp; padding: 10px;&nbsp; cursor: pointer;}.active {&nbsp; background: lightgrey;}.tab-content {&nbsp; display: none;&nbsp; padding: 10px;}.show-content {&nbsp; display: block;&nbsp; background: lightgray;}<ul>&nbsp; <li class="tab active">Tab 1</li>&nbsp; <li class="tab">Tab 2</li>&nbsp; <li class="tab">Tab 3</li></ul><div class="tab-content show-content">&nbsp; <p>&nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp; </p></div><div class="tab-content">&nbsp; <p>Phasellus aliquam orci neque, non varius quam gravida vel.</p></div><div class="tab-content">&nbsp; <p>&nbsp; &nbsp; Vivamus iaculis est in sapien congue, ac condimentum.&nbsp; </p></div>

Answer 2

const tabs = document.querySelectorAll(".tab");const contents = document.querySelectorAll(".tab-content");tabs.forEach(tab => tab.addEventListener("click", function() {&nbsp; tabs.forEach(tab => tab.classList.remove("active"));&nbsp; contents.forEach(c => c.classList.remove("show-content"));&nbsp; const contentId = this.dataset.content;&nbsp; this.classList.add("active");&nbsp; document.querySelector(`.tab-content[data-content="${contentId}"]`).classList.add("show-content");}));ul {&nbsp; margin: 0;&nbsp; padding: 0;}.tab {&nbsp; display: inline-block;&nbsp; border: 1px solid lightgrey;&nbsp; padding: 10px;&nbsp; cursor: pointer;}.active {&nbsp; background: lightgrey;}.tab-content {&nbsp; display: none;&nbsp; padding: 10px;}.show-content {&nbsp; display: block;&nbsp; background: lightgray;}<ul>&nbsp; <li class="tab active" data-content="1">Tab 1</li>&nbsp; <li class="tab" data-content="2">Tab 2</li>&nbsp; <li class="tab" data-content="3">Tab 3</li></ul><div class="tab-content show-content" data-content="1">&nbsp; <p>&nbsp; &nbsp; 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp; </p></div><div class="tab-content" data-content="3">&nbsp; <p>3. Phasellus aliquam orci neque, non varius quam gravida vel.</p></div><div class="tab-content" data-content="2">&nbsp; <p>&nbsp; &nbsp; 2. Vivamus iaculis est in sapien congue, ac condimentum.&nbsp; </p></div>

Answer 3

您可以使用事件委托来获取单击选项卡的当前编号const ulAllTabs&nbsp; &nbsp; &nbsp; = document.querySelector('ul#all-tabs')&nbsp; ,&nbsp; &nbsp;ulAllTabsLi&nbsp; &nbsp; = ulAllTabs.querySelectorAll('li')&nbsp; ,&nbsp; &nbsp;AllContentsDiv = document.querySelectorAll('#all-contents > div')&nbsp; ;ulAllTabs.onclick=e=>&nbsp; {&nbsp; if (!e.target.matches('li')) return // ignore others clicks outside&nbsp; ulAllTabsLi.forEach( (li,i) => {&nbsp; &nbsp; if (e.target===li) {&nbsp; &nbsp; &nbsp; li.classList.add('active' )&nbsp; &nbsp; &nbsp; AllContentsDiv[i].classList.add('active' )&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; li.classList.remove('active' )&nbsp; &nbsp; &nbsp; AllContentsDiv[i].classList.remove('active' )&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; }我添加了一个<section>对所有 div 进行分组（我的眼睛更清楚......）const ulAllTabs&nbsp; &nbsp; &nbsp; = document.querySelector('ul#all-tabs')&nbsp; ,&nbsp; &nbsp;ulAllTabsLi&nbsp; &nbsp; = ulAllTabs.querySelectorAll('li')&nbsp; ,&nbsp; &nbsp;AllContentsDiv = document.querySelectorAll('#all-contents > div')&nbsp; ;ulAllTabs.onclick=e=>&nbsp; {&nbsp; if (!e.target.matches('li')) return // ignore others clicks outside&nbsp; ulAllTabsLi.forEach((li,i)=>&nbsp; &nbsp; {&nbsp; &nbsp; if (e.target===li)&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; li.classList.add('active' )&nbsp; &nbsp; &nbsp; AllContentsDiv[i].classList.add('active' )&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; li.classList.remove('active' )&nbsp; &nbsp; &nbsp; AllContentsDiv[i].classList.remove('active' )&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; }ul#all-tabs {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; }ul#all-tabs > li {&nbsp; display: inline-block;&nbsp; border: 1px solid lightgrey;&nbsp; border-bottom: none;&nbsp; padding: 10px;&nbsp; cursor: pointer;&nbsp; }ul#all-tabs > li.active {&nbsp; background: lightgrey;&nbsp; }section#all-contents > div {&nbsp; display: none;&nbsp; padding: 10px;&nbsp; }section#all-contents > div.active {&nbsp; display: block;&nbsp; background: lightgray;&nbsp; }<ul id="all-tabs">&nbsp; <li class="active">Tab 1</li>&nbsp; <li class="">Tab 2</li>&nbsp; <li class="">Tab 3</li></ul><section id="all-contents">&nbsp; <div class="active">&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp; &nbsp; </p>&nbsp; </div>&nbsp; <div class="">&nbsp; &nbsp; <p>Phasellus aliquam orci neque, non varius quam gravida vel.</p>&nbsp; </div>&nbsp; <div class="">&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; Vivamus iaculis est in sapien congue, ac condimentum.&nbsp; &nbsp; </p>&nbsp; </div></section>您还可以使用数据属性将选项卡与 div 链接const ulAllTabs&nbsp; &nbsp; = document.querySelector('ul#all-tabs')&nbsp; ,&nbsp; &nbsp;tabs_and_Div = [...ulAllTabs.querySelectorAll('li')].reduce((res,eTab)=>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; res.push( { tab:eTab, div: document.querySelector(`div.tab-content[data-ref="${eTab.dataset.ref}"]`)} )&nbsp; &nbsp; &nbsp; &nbsp; return res&nbsp; &nbsp; &nbsp; &nbsp; },[])&nbsp; ;ulAllTabs.onclick=e=>&nbsp; {&nbsp; if (!e.target.matches('li'))&nbsp; &nbsp;return // ignore others clicks outsides&nbsp;&nbsp; tabs_and_Div.forEach(tbDv=> {&nbsp; &nbsp; if (e.target===tbDv.tab) {&nbsp; &nbsp; &nbsp; tbDv.tab.classList.add('active')&nbsp; &nbsp; &nbsp; tbDv.div.classList.add('show-content')&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; tbDv.tab.classList.remove('active')&nbsp; &nbsp; &nbsp; tbDv.div.classList.remove('show-content')&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; }const ulAllTabs&nbsp; &nbsp; = document.querySelector('ul#all-tabs')&nbsp; ,&nbsp; &nbsp;tabs_and_Div = [...ulAllTabs.querySelectorAll('li')].reduce((res,eTab)=>&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; res.push( { tab:eTab, div: document.querySelector(`div.tab-content[data-ref="${eTab.dataset.ref}"]`)} )&nbsp; &nbsp; &nbsp; &nbsp; return res&nbsp; &nbsp; &nbsp; &nbsp; },[])&nbsp; ;ulAllTabs.onclick=e=>&nbsp; {&nbsp; if (!e.target.matches('li'))&nbsp; &nbsp;return // ignore others clicks outsides&nbsp;&nbsp; tabs_and_Div.forEach(tbDv=> {&nbsp; &nbsp; if (e.target===tbDv.tab) {&nbsp; &nbsp; &nbsp; tbDv.tab.classList.add('active')&nbsp; &nbsp; &nbsp; tbDv.div.classList.add('show-content')&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; tbDv.tab.classList.remove('active')&nbsp; &nbsp; &nbsp; tbDv.div.classList.remove('show-content')&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; }ul#all-tabs {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; }ul#all-tabs > li {&nbsp; display: inline-block;&nbsp; border: 1px solid lightgrey;&nbsp; border-bottom: none;&nbsp; padding: 10px;&nbsp; cursor: pointer;&nbsp; }ul#all-tabs > li.active {&nbsp; background: lightgrey;&nbsp; }.tab-content {&nbsp; display: none;&nbsp; padding: 10px;&nbsp; }.show-content {&nbsp; display: block;&nbsp; background: lightgray;&nbsp; }<ul id="all-tabs">&nbsp; <li data-ref="1" class="active"> Tab 1</li>&nbsp; <li data-ref="2" > Tab 2</li>&nbsp; <li data-ref="3" > Tab 3</li></ul><div class="tab-content show-content" data-ref="1">&nbsp; <p>&nbsp; &nbsp; 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp; </p></div><div class="tab-content" data-ref="3">&nbsp; <p>3. Phasellus aliquam orci neque, non varius quam gravida vel.</p></div><div class="tab-content" data-ref="2">&nbsp; <p>&nbsp; &nbsp; 2. Vivamus iaculis est in sapien congue, ac condimentum.&nbsp; </p></div>

Answer 4

您的 tabContents 变量将是一个元素数组。因此，您将需要使用相关索引访问特定元素：tabContents[0].classList.add("show-contents");