Javascript Tab手风琴问题

Question

我创建了一个可以正常工作的Tabs手风琴。 但是他们的行为并不像我想要的那样。 在当前的选项卡中，当我按一个选项卡时，它将显示其中的内容，而当我按另一个选项卡时，它也会打开。 我想发生的事情是，当我单击其中一个选项卡成为唯一显示的选项卡时，其余的选项卡被关闭。 希望有人可以帮助我添加我需要的额外代码。

 var tabsContainer = document.getElementById("tabsContainer"); var tabUl = document.getElementById("tabs-ul"); var tabOne = document.getElementById("tab-one"); var tabTwo = document.getElementById("tab-two"); var tabThree = document.getElementById("tab-three"); var tabOneContent = document.getElementById("tab-one-content"); var tabTwoContent = document.getElementById("tab-two-content"); var tabThreeContent = document.getElementById("tab-three-content"); function openTabOne() { if (tabOneContent.className == "toggleTab") { tabOneContent.className = ""; } else { tabOneContent.className = "toggleTab"; } } function openTabTwo() { if (tabTwoContent.className == "toggleTab") { tabTwoContent.className = ""; } else { tabTwoContent.className = "toggleTab"; } } function openTabThree() { if (tabThreeContent.className == "toggleTab") { tabThreeContent.className = ""; } else { tabThreeContent.className = "toggleTab"; } } tabOne.addEventListener("click", openTabOne); tabTwo.addEventListener("click", openTabTwo); tabThree.addEventListener("click", openTabThree); 

 * { padding: 0px; margin: 0px; } body { font-family: sans-serif; font-weight: 14px; background: silver; } #tabsContainer { width: 50%; margin: 0 auto; border: 3px solid #a70d89; padding: 20px; box-shadow: 2px 2px 10px rgba(85, 85, 85, 0.77); ; } ul { list-style: none; } li { display: inline-block; padding: 5px 20px; background: #4c99ac; color: #7910c6; cursor: pointer; } #tabsContainer > div { margin: 20px 0px; display: none; } #tab-one-content.toggleTab, #tab-two-content.toggleTab, #tab-three-content.toggleTab { display: block; } 

 <div id="tabsContainer"> <ul id="tabs-ul"> <li id="tab-one">Tab One</li> <li id="tab-two">Tab Two</li> <li id="tab-three">Tab Three</li> </ul> <div id="tab-one-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> <div id="tab-two-content"> Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> <div id="tab-three-content"> Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> </div> 

Answer 1

您需要从不想再打开的选项卡中删除该类，这是一种可行的方法。

 var tabsContainer = document.getElementById("tabsContainer"); var tabUl = document.getElementById("tabs-ul"); var tabOne = document.getElementById("tab-one"); var tabTwo = document.getElementById("tab-two"); var tabThree = document.getElementById("tab-three"); var tabPanels = [ document.getElementById("tab-one-content"), document.getElementById("tab-two-content"), document.getElementById("tab-three-content") ]; function showTab(tabIndex) { for(var i = 0; i < tabPanels.length; i++) { tabPanels[i].className = i == tabIndex ? 'toggleTab' : ''; } } function openTabOne() { showTab(0); } function openTabTwo() { showTab(1); } function openTabThree() { showTab(2); } openTabOne(); tabOne.addEventListener("click", openTabOne); tabTwo.addEventListener("click", openTabTwo); tabThree.addEventListener("click", openTabThree); 

 * { padding:0px; margin:0px; } body { font-family: sans-serif; font-weight: 14px; background:silver; } #tabsContainer { width:50%; margin:0 auto; border:3px solid #a70d89; padding:20px; box-shadow: 2px 2px 10px rgba(85, 85, 85, 0.77);; } ul { list-style: none; } li { display: inline-block; padding:5px 20px; background:#4c99ac; color:#7910c6; cursor: pointer; } #tabsContainer > div { margin: 20px 0px; display: none; } #tab-one-content.toggleTab, #tab-two-content.toggleTab, #tab-three-content.toggleTab { display: block; } 

 <div id="tabsContainer"> <ul id="tabs-ul"> <li id="tab-one">Tab One</li> <li id="tab-two">Tab Two</li> <li id="tab-three">Tab Three</li> </ul> <div id="tab-one-content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> <div id="tab-two-content"> Placeat quam nesciunt, architecto earum! Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> <div id="tab-three-content"> Beatae explicabo voluptatum rem odit sint dolorem, voluptatem, est iure quia ab voluptates excepturi ratione debitis praesentium. </div> </div>