使用 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

您需要找到单击的选项卡的索引，然后使用它来显示相同索引处的内容。

1. 使用querySelectorAll代替querySelector（这只会选择一个元素）

2. 该类名为show-contentnot show。

3. 删除show-contentfor 循环中的类。

4. 在其父元素中查找单击元素的索引。

5. 使用该索引选择相应的内容。

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

const tabContents = document.querySelectorAll(".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[i].classList.remove("show-content");

  }

  

  const index = Array.prototype.slice.call(e.target.parentElement.children).indexOf(e.target)

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

  tabContents[index].classList.add("show-content");

}

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 2

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

const contents = document.querySelectorAll(".tab-content");

tabs.forEach(tab => tab.addEventListener("click", function() {

  tabs.forEach(tab => tab.classList.remove("active"));

  contents.forEach(c => c.classList.remove("show-content"));

  const contentId = this.dataset.content;

  this.classList.add("active");

  document.querySelector(`.tab-content[data-content="${contentId}"]`).classList.add("show-content");

}));

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" data-content="1">Tab 1</li>

  <li class="tab" data-content="2">Tab 2</li>

  <li class="tab" data-content="3">Tab 3</li>

</ul>

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

  <p>

    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  </p>

</div>

<div class="tab-content" data-content="3">

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

</div>

<div class="tab-content" data-content="2">

  <p>

    2. Vivamus iaculis est in sapien congue, ac condimentum.

  </p>

</div>

Answer 3

您可以使用事件委托来获取单击选项卡的当前编号

const ulAllTabs      = document.querySelector('ul#all-tabs')

  ,   ulAllTabsLi    = ulAllTabs.querySelectorAll('li')

  ,   AllContentsDiv = document.querySelectorAll('#all-contents > div')

  ;

ulAllTabs.onclick=e=>

  {

  if (!e.target.matches('li')) return // ignore others clicks outside

  ulAllTabsLi.forEach( (li,i) => {

    if (e.target===li) {

      li.classList.add('active' )

      AllContentsDiv[i].classList.add('active' )

      }

    else {

      li.classList.remove('active' )

      AllContentsDiv[i].classList.remove('active' )

      }

    })

  }

我添加了一个<section>对所有 div 进行分组（我的眼睛更清楚......）

const ulAllTabs      = document.querySelector('ul#all-tabs')

  ,   ulAllTabsLi    = ulAllTabs.querySelectorAll('li')

  ,   AllContentsDiv = document.querySelectorAll('#all-contents > div')

  ;

ulAllTabs.onclick=e=>

  {

  if (!e.target.matches('li')) return // ignore others clicks outside

  ulAllTabsLi.forEach((li,i)=>

    {

    if (e.target===li)

      {

      li.classList.add('active' )

      AllContentsDiv[i].classList.add('active' )

      }

    else

      {

      li.classList.remove('active' )

      AllContentsDiv[i].classList.remove('active' )

      }

    })

  }

ul#all-tabs {

  margin: 0;

  padding: 0;

  }

ul#all-tabs > li {

  display: inline-block;

  border: 1px solid lightgrey;

  border-bottom: none;

  padding: 10px;

  cursor: pointer;

  }

ul#all-tabs > li.active {

  background: lightgrey;

  }

section#all-contents > div {

  display: none;

  padding: 10px;

  }

section#all-contents > div.active {

  display: block;

  background: lightgray;

  }

<ul id="all-tabs">

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

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

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

</ul>

<section id="all-contents">

  <div class="active">

    <p>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    </p>

  </div>

  <div class="">

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

  </div>

  <div class="">

    <p>

      Vivamus iaculis est in sapien congue, ac condimentum.

    </p>

  </div>

</section>

您还可以使用数据属性将选项卡与 div 链接

const ulAllTabs    = document.querySelector('ul#all-tabs')

  ,   tabs_and_Div = [...ulAllTabs.querySelectorAll('li')].reduce((res,eTab)=>

        {

        res.push( { tab:eTab, div: document.querySelector(`div.tab-content[data-ref="${eTab.dataset.ref}"]`)} )

        return res

        },[])

  ;

ulAllTabs.onclick=e=>

  {

  if (!e.target.matches('li'))   return // ignore others clicks outsides 

  tabs_and_Div.forEach(tbDv=> {

    if (e.target===tbDv.tab) {

      tbDv.tab.classList.add('active')

      tbDv.div.classList.add('show-content')

      }

    else {

      tbDv.tab.classList.remove('active')

      tbDv.div.classList.remove('show-content')

      }

    })

  }

const ulAllTabs    = document.querySelector('ul#all-tabs')

  ,   tabs_and_Div = [...ulAllTabs.querySelectorAll('li')].reduce((res,eTab)=>

        {

        res.push( { tab:eTab, div: document.querySelector(`div.tab-content[data-ref="${eTab.dataset.ref}"]`)} )

        return res

        },[])

  ;

ulAllTabs.onclick=e=>

  {

  if (!e.target.matches('li'))   return // ignore others clicks outsides 

  tabs_and_Div.forEach(tbDv=> {

    if (e.target===tbDv.tab) {

      tbDv.tab.classList.add('active')

      tbDv.div.classList.add('show-content')

      }

    else {

      tbDv.tab.classList.remove('active')

      tbDv.div.classList.remove('show-content')

      }

    })

  }

ul#all-tabs {

  margin: 0;

  padding: 0;

  }

ul#all-tabs > li {

  display: inline-block;

  border: 1px solid lightgrey;

  border-bottom: none;

  padding: 10px;

  cursor: pointer;

  }

ul#all-tabs > li.active {

  background: lightgrey;

  }

.tab-content {

  display: none;

  padding: 10px;

  }

.show-content {

  display: block;

  background: lightgray;

  }

<ul id="all-tabs">

  <li data-ref="1" class="active"> Tab 1</li>

  <li data-ref="2" > Tab 2</li>

  <li data-ref="3" > Tab 3</li>

</ul>

<div class="tab-content show-content" data-ref="1">

  <p>

    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  </p>

</div>

<div class="tab-content" data-ref="3">

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

</div>

<div class="tab-content" data-ref="2">

  <p>

    2. Vivamus iaculis est in sapien congue, ac condimentum.

  </p>

</div>

Answer 4

您的 tabContents 变量将是一个元素数组。因此，您将需要使用相关索引访问特定元素：

tabContents[0].classList.add("show-contents");