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>，内容2可见。

我的代码：

$(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();
   });
});

它的作用实际上是交换内容，但它会立即交换，所以我一直看到内容1。我确定我有一些不好的东西，但我只是一个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类来显示＆amp;隐藏你的元素并用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();
   });
});

如何隐藏内容并显示内容两个？

2 个答案:

Example

Example