最初隐藏一个 div（在 jquery 中），然后单击另一个，显示的 div 消失并被隐藏的 div 替换答案

【问题标题】：Hide a div intitially (in jquery), then click on another and the shown div disappears and is replaced by the hidden div最初隐藏一个 div（在 jquery 中），然后单击另一个，显示的 div 消失并被隐藏的 div 替换
【发布时间】：2014-01-14 18:55:22
【问题描述】：

我想先隐藏，然后当用户点击，然后替换它。这是jquery代码：

<script>
$(document).ready(function(){
  $(".header-1").hide()(function(){
    $(".header-0").click(function(){
      $(".header-0").hide()(function(){   
        $(".header-1").show();
       });
    });
  });
});
</script>



<div class="header-0">Issued<br>Appts <span class="glyphicon glyphicon-play" style="font-size:9px;"></span></div>
<div class="header-1">Issued<br>Appts <span class="glyphicon glyphicon-backward" style="font-size:9px;"></span></div>

【问题讨论】：

重复？ stackoverflow.com/questions/752847/switch-toggle-div-jquery
.hide()(function(){ ?

标签： javascript jquery html

【解决方案1】：

你的结构是错误的。您几乎只需删除 (function(){ 部分及其相应的结束括号和方括号

这是正确的结构

$(document).ready(function(){
  $(".header-1").hide();
  $(".header-0").click(function(){
      $(".header-0").hide();
      $(".header-1").show();
  });
});

Demo

如果你想切换它们，那么使用下面的

$(document).ready(function(){
  $(".header-1").toggle();
  $(".header-0, .header-1").click(function(){
      $(".header-0").toggle();
      $(".header-1").toggle();
  });
});

Demo

【讨论】：

【解决方案2】：

你想要的是手风琴。

查看本教程了解如何操作：http://www.youtube.com/watch?v=uDD7Qn0-taI

您可以在这里找到代码：http://www.newthinktank.com/2011/03/jquery-video-tutorial-pt-6/

【讨论】：

【解决方案3】：

这称为交叉淡入淡出。为了使其按预期工作，您应该将两个 div 放在相对父级中，使它们都是 ABSOLUTE, top: 0, left: 0 以便它们重叠。第一个可见，第二个隐藏，反之亦然。请注意，如果您想“fadeIn()fadeOut()”，“绝对”的想法很有用。否则，它对于简单的 .hide() 和 .show() 几乎没有什么不同。

<div class="relative">
   <div class="absolute header-0">CONTENT</div>
   <div class="absolute header-1">CONTENT</div>
</div>

<script>
$(document).ready(function() {
   // Given the fact that they are both in the same div
   $('.relative').children('.absolute').click(function(e) {
      // Hides current div, shows the siblings
      $(this).hide().siblings('.absolute').show();
   });
});
</script>

【讨论】：