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

Question

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

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

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

2) 当我单击 link <a href="#" id="click_to_change_content">Click</a> 时...带有 <div id="content1_bottom"></div> 隐藏和 content2 的 <div id="content1"></div> 可见。

我的代码：

$(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

希望对您有所帮助！

已编辑

显示 link 功能（基本相同，添加 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();
   });
});

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

How to hide content one and show content two?

html

javascript

css

jquery

visibility

Example

Example