javascript - 使用两个按钮在两个 div 之间切换的简单、非 jquery 方法是什么？

Question

我正在寻找一种在两个 div 之间切换的简单的非 jquery 方法。具体来说，单击按钮A将显示div A内容（并隐藏div B内容），单击按钮B将显示div B内容（并隐藏div A内容。我希望在页面加载时默认显示div A内容。

我拥有的代码没有从 onclick 中隐藏适当的 div

我环顾四周，但每个解决方案似乎都过于复杂或似乎涉及 jquery - 我真的不想使用它，因为我必须在我不应该更新那些东西的网站上使用旧的 jquery 库。

<button class="button" onclick="content_A(); Hide_Content_B;">Content A</button>
&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
<button class="button" onclick="content_B(); Hide_Content_A;">Content B</button>
<script>
  function Content_A() {
      var x = document.getElementById("A");
      if (x.style.display === "none") {
          x.style.display = "block";
      } else {
          x.style.display = "none";
      }
  }
</script>
<script>
  function Hide_Content_B() {
      var x = document.getElementById("B");
      if (x.style.display === "block") {
          x.style.display = "none";
      } else {
          x.style.display = "none";
      }
  }
</script>
<script>
  function Content_B() {
      var x = document.getElementById("B");
      if (x.style.display === "none") {
          x.style.display = "block";
      } else {
          x.style.display = "none";
      }
  }
</script>
<script>
  function Hide_Content_A() {
      var x = document.getElementById("A");
      if (x.style.display === "block") {
          x.style.display = "none";
      } else {
          x.style.display = "none";
      }
  }
</script>
<div id="A"> stuff</div>
<div id="B"> other stuff </div>

标签： javascripthtmlcss

Answer 1

创建一个函数showContent，将id要切换的元素的 用作参数并仅切换CSS 类，即visible在具有该 id 的元素上。

使用CSS 类最初隐藏“可切换”元素。您可以visible直接在页面加载时显示的元素上设置类。

这是一个例子：

function showContent(id) {
  document.getElementById(id).classList.toggle('visible')
}

/* 
   All elements with class "toggleable" 
   should be hidden.
 */
.toggleable {
  display: none;
}

/* 
   All elements that have both
   class "toggleable" and "visible"
   should be visible.
 */
.toggleable.visible {
  display: block;
}

<button onclick="showContent('a');" >Show Content A</button>
<button onclick="showContent('b');" >Show Content B</button>


<div class="toggleable visible" id="a">
  Hello Content A!
</div>
<div class="toggleable" id="b"> 
  Hello Content B!
</div>