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

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> hide和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-切换

希望有帮助！

已编辑

显示链接功能（基本上相同，添加了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");
   });
});

例

---

但是坚持使用您的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();
   });
});

例