Javascript 单击显示一个div并隐藏另一个div和oposite

我正在尝试：当我单击一个按钮以显示div1和div2时，当我再次单击它以执行相反的操作时，将显示div2和div1。我只完成了第一部分

Jquery：

<script type="text/javascript">
  $(document).ready(function() {
    $("#insert").on('click', function() {
      $(".subtable").hide();
      $(".insert-field").show();
    });
  });
</script> 

$（文档）.ready（函数（）{
$（“#插入”）。在（'单击'，函数（）上{
$（“.subtable”）.hide（）；
$（“.insert字段”）.show（）；
});
});

HTML

...
...

我缺少什么？

您可以使用

toggle（）

更改元素的显示。如果它被隐藏，它将被显示。如果显示，将被隐藏。这是来回翻转东西的最简单方法

另一种方法是检查元素是否隐藏，或者在一个单独的变量中跟踪状态，您可以参考该变量了解是隐藏还是显示。

使用

jQuery.toggle（）

。根据您的实现，您可以根据另一个元素的

.visible

属性将

.toggle（）

的参数设置为true或false

$("button").click(function(){
   $("p").toggle();
}); 

这里有一个快速教程可以帮助您

---

Aha，因此我将.hide和.show更改为两者的切换。是的，正在工作，将尽快标记为已接受。

$("button").click(function(){
   $("p").toggle();
}); 

$(document).ready(function(){
  var flag = true;
  $("#button").on('click',function(){
      if(flag == true){
        $("#div1").show();
        $("#div2").hide();
        flag =false;
       }else{
          $("#div1").hide();
          $("#div2").show();
          flag =true;
         }
   });