Javascript 切换多个按钮

Question

我有一些针对多个按钮的 Javascript 代码。单击时，内容应该出现，确实如此。但是，我正在努力创建当再次单击按钮时隐藏内容的代码。

我已经包含了我想要切换的元素的 Javascript、内容和 CSS。干杯。

注意:代码必须是Javascript

function openTab(click, openTab) {
  var i, content, link;
  content = document.getElementsByClassName("content");
  for (i = 0; i < content.length; i++) {
    content[i].style.display = "none";
  }
  links = document.getElementsByClassName("links");
  for (i = 0; i < links.length; i++) {
    links[i].className = links[i].className.replace(" active", "");
  }
  document.getElementById(openTab).style.display = "block";
  click.currentTarget.className += " active";
}

.content {
  font-family: 'Lato';
  max-width: 100%;
  font-size: 20px;
  letter-spacing: 4px;
  color: #e8eaed;
  display: none;
  border-top: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<section class = "Container">
    <div class="tabs">
      <button class="link" onclick="openTab(event, 'About')">About</button>
      <button class="link" onclick="openTab(event, 'Hire')">Why You Should Hire Me</button>
      <button class="link" onclick="openTab(event, 'Contact')">Contact</button>
    </div>
</section>

<section class="Container2">
  <div id="About" class="content">About</div>

  <div id="Hire" class="content">Hire</div>

  <div id="Contact" class="content">Contact</div>
</section>

Answer 1

声明一个代表元素是否隐藏的变量。此外，如果可能的话，您可以尝试使用 classList 从具有多个类名的元素中添加/删除类，而不是 className 字符串操作。

您可以使用 classList.toggle轻松切换类(class):

let hidden = false;

function openTab(click, openTabId) {
  document.querySelectorAll('.content').forEach(
    content => content.style.display = hidden ? 'block' : 'none'
  );
  document.querySelectorAll('.links').forEach(
    link => link.classList.toggle('active')
  );

  document.getElementById(openTabId).style.display = "block";
  click.currentTarget.classList.toggle('active');
  hidden = !hidden;
}

更好的是，将 hidden 变量封装在 openTab 中，因为它在外部范围内没有用:

const openTab = (() => {
  let hidden = false;
  return (click, openTabId) => {
    document.querySelectorAll('.content').forEach(
      content => content.style.display = hidden ? 'block' : 'none'
    );
    document.querySelectorAll('.links').forEach(link => {
      if (hidden) link.classList.add('active');
      else link.classList.remove('active');
    });

    document.getElementById(openTabId).style.display = "block";
    click.currentTarget.classList.toggle('active');
    hidden = !hidden;
  }
})();