如何隐藏内容一并显示内容二？

Question

我这里有问题。我想在我的网站上隐藏一个内容并使用 jQuery 显示下一个内容。我只有 2 个内容 div。

所以基本上我想做的是......

1) 当我打开网站<div id="content2"></div> 和<div id="content2_bottom"></div> 时隐藏。

2) 当我点击链接 <a href="#" id="click_to_change_content">Click</a> ...<div id="content1"></div> 和 <div id="content1_bottom"></div> 隐藏并且 content2 可见。

我的代码：

$(function(){
   if ($("#content1").is(":visible")) {
      $("#content2").hide();
      $("#content2_bottom").hide();
   }
   $("#click_to_change_content").on("click", function(){
      $("#content1").hide();
      $("#content2").show();
      $("#content1_bottom").hide();
      $("#content2_bottom").show();
   });
});

它实际上是交换内容，但它会立即交换它，所以我一直只看到 content1。我确定我有什么不好的地方，但我只是 jQuery 的初学者，所以我不知道我做错了什么。

感谢您的建议！

Answer 1

对于这个例子，我能想到的最简单的方法是使用jQuery 的.toggle() 函数。只要在页面加载时隐藏这两个 div 之一，您只需要一个函数来隐藏一个并在按下按钮时显示另一个。以这段代码为例：

HTML：

<div id="content1">
  <label class="label label-success">Content 1</label>
</div>

<div id="content2" style="display:none;">
  <label class="label label-danger">Content 2</label>
</div>

<div>
  <button id="button" class="btn btn-primary">Toggle!</button>
</div>

<div>
  <a href="#" id="link">Toggle!</a>
</div>

Javascript（使用 jQuery）：

$(document).ready(function(){
  $("#button, #link").click(function(e){
    e.preventDefault();
    $("#content1, #content2").toggle();
  });
});

不必担心检查可见性状态，假设始终隐藏一个，.toggle() 将在您按下切换按钮时切换向用户显示哪个。

这是一个 Bootply 展示它是如何工作的：

Bootply - Toggle

希望有帮助！

已编辑

显示链接功能（基本相同，添加e.preventDefault() 以停止任何页面移动。）

Answer 2

我更喜欢使用 css 类来显示和隐藏您的元素并使用 jquery 切换它们。示例：

<div class="content-section shown">Content 1</div>

<div class="content-section">Content 2</div>

<button id="click_to_change_content">click_to_change_content</button>

css:

.content-section {
    display: none;
}

.content-section.shown {
    display: block;
}

jquery:

$(function(){
   $("#click_to_change_content").on("click", function(){
          $(".content-section").toggleClass("shown");
   });
});

Example

---

但坚持你的 html 结构：

html:

<div id="content1">Content 1</div>
<div id="content1_bottom">Content 1 bottom</div>

<div id="content2">Content 2</div>
<div id="content2_bottom">Content 2 bottom</div>

<button id="click_to_change_content">click_to_change_content</button>

jquery:

$(function(){
   $("#content2, #content2_bottom").hide();
   $("#click_to_change_content").on("click", function(){
      $("#content2, #content2_bottom, #content1, #content1_bottom").toggle();
   });
});

Example