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

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

$（文档）.ready（函数（）{
$（“.header-1”）.hide（）（函数（）{
$（“.header-0”）。单击（函数（）{
$（“.header-0”）.hide（）（函数（）{
$（“.header-1”）.show（）；
});
});
});
});
已发布的应用程序
已发布的应用程序

你想要的是一个手风琴

查看本教程，了解如何执行此操作：

---

您可以在这里找到代码：

这称为交叉淡入淡出。为了使其按预期工作，您应该将两个div放置在相对父对象中，使它们都是绝对的，top:0，left:0，以便它们重叠。第一个是可见的，第二个是隐藏的，反之亦然。请注意，如果您想要“fadeIn（）fadeOut（）”，那么“绝对”概念是有用的。除此之外，它对simple.hide（）和.show（）几乎没有什么不同

内容
内容
$（文档）.ready（函数（）{
//考虑到他们都在同一个部门
$（'.relative'）。子项（'.absolute'）。单击（函数（e）{
//隐藏当前div，显示同级
$（this.hide（）.sides（'.absolute'）.show（）；
});
});

您的结构完全错误。您几乎只需删除

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

复制？

.hide（）（函数（）{

？

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