javascript - 切换显示/隐藏 html 内容

Question

我正在尝试创建脚本/流程。我想使用 jQuery 交换 html 元素(总共 12 个 div)并留在一个居中和响应的部分元素中。第一个 div 是可见的，其余的是隐藏的。在每个 div 中，而不是在静态按钮列表中，会有一些链接可以让您隐藏当前的 div，并根据其 id 取消隐藏另一个 div。

JQuery Toggle 似乎是最简单的，但我不知道如何切换超过 2 个元素。不过，我愿意接受任何解决方案。

<section>
<div id="a">
    <p>content here</p>
        <div class="links">
            <a href="#" id="b-link">b</a> <a href="#" id="c-link">c</a>
        </div>
</div>

<div class="hidden" id="b">
    <p>content here</p>
        <div class="links">
            <a href="#" id="a-link">a</a> <a href="#" id="c-link">c</a> 
<a href="#" id="d-link">d</a>
        </div>
</div>

<div class="hidden" id="c">
    <p>content here</p>
        <div class="links">
            <a href="#" id="a-link">a</a> <a href="#" id="b-link">b</a>
        </div>
</div>

<div class="hidden" id="d">
    <p>content here</p>
        <div class="links">
            <a href="#" id="a-link">c</a> <a href="#" id="b-link">a</a>
        </div>
</div>
</section>

Answer 1

这符合您的要求，我对代码进行了一些更改。

按钮有一个自定义属性for，它对应于它们显示的面板的id。然后切换类 .active，它通过 CSS 显示面板。默认情况下，面板处于隐藏状态，直到它们处于“事件”状态。

jquery 非常简单，将点击事件附加到类 .panel-switch 的任何按钮。下面有完整的评论。我的偏好是使用 CSS，而不是添加类，您可以使用相同的选择方法简单地 .toggle() DOM 元素。

如果这不是您所希望的，请告诉我。

---

演示

// Add click event to the buttons with class panel-switch
$(".panel-switch").click(function() {

  // Hide current active panel
  $(".panel.active").removeClass("active");

  // Activate chosen panel
  $(".panel#" + $(this).attr("for")).addClass("active");

});

.panel {
  display: none;
}

.panel.active {
  display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="panel active" id="a">
    <p>Panel A</p>
    <div class="links">
      <button class="panel-switch" for="b">b</button> <button class="panel-switch" for="c">c</button>
    </div>
  </div>

  <div class="panel" id="b">
    <p>Panel B</p>
    <div class="links">
      <button class="panel-switch" for="a">a</button> <button class="panel-switch" for="d">d</button>
    </div>
  </div>

  <div class="panel" id="c">
    <p>Panel C</p>
    <div class="links">
      <button class="panel-switch" for="a">a</button> <button class="panel-switch" for="b">b</button>
    </div>
  </div>

  <div class="panel" id="d">
    <p>Panel D</p>
    <div class="links">
      <button class="panel-switch" for="c">c</button> <button class="panel-switch" for="a">a</button>
    </div>
  </div>
</section>