Question

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

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>

Javascript Tabs手风琴问题

1 个答案: