最初隐藏一个 div(在 jquery 中)，然后单击另一个，显示的 div 消失并被隐藏的 div 取代

Question

我想先隐藏，然后在用户单击时隐藏，然后替换它。这是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>

Answer 1

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

这是正确的结构

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

演示

如果要切换它们，请使用以下命令

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

演示

Answer 2

你想要的是手风琴。

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

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

Answer 3

这

称为交叉淡入淡出。 为了使它按预期工作，您应该将两个div 放在一个相对的父级中，使它们都是绝对的，顶部：0，左：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>