Jquery 如何更改移动div的内部内容

当我点击“登录”按钮时，只有“表格1”应该是可见的，而“表格2”应该是隐藏的；当我点击“注册”按钮时，只有“表格2”是可见的，而“表格1”是隐藏的，怎么办

HTML:

<div class="box">
  <div class="first">
    Login Form
  </div>
  <div class="second">
    Signup Form
  </div>
</div>

<button type="button" id="btn-login">Login</button>
<button type="button" id="btn-signup">Signup</button>

jQuery：

<script>
    $(document).ready(function(){
      $("#btn-login").click(function(){
        $("div.box").removeClass("move-right");
        $("div.box").addClass("move-left");
      });

      $("#btn-signup").click(function(){
        $("div.box").removeClass("move-left");
        $("div.box").addClass("move-right");
      });
    });
</script>

$（文档）.ready（函数（）{
$（“#btn登录”）。单击（函数（）{
$（“div.box”）.removeClass（“向右移动”）；
$（“div.box”）.addClass（“向左移动”）；
});
$（“#btn注册”）。单击（函数（）{
$（“div.box”）.removeClass（“向左移动”）；
$（“div.box”）.addClass（“向右移动”）；
});
});

您可以使用css属性显示

 $(document).ready(function(){
      $("#btn-login").click(function(){
        $(".second").css("display", "none");
        $(".first").css("display", "block");
        $("div.box").removeClass("move-right");
        $("div.box").addClass("move-left");
      });

      $("#btn-signup").click(function(){
      $(".second").css("display", "block");
        $(".first").css("display", "none");
        $("div.box").removeClass("move-left");
        $("div.box").addClass("move-right");
      });
    });

我已对此链接进行了更改签出尝试以下操作：

$(document).ready(function(){
   $("#btn-login").click(function(){
     $("div.box").removeClass("move-right");
     $("div.box").addClass("move-left");
     $('.second').addClass('hidden');
     $('.first').removeClass('hidden');
   });

   $("#btn-signup").click(function(){
     $("div.box").removeClass("move-left");
     $("div.box").addClass("move-right");
     $('.first').addClass('hidden');
     $('.second').removeClass('hidden');
   });
});

在css中：

.hidden{
  display:none;
}

---

感谢朋友的快速响应，我设置了以下代码：

$(document).ready(function(){
   $('.second').addClass('hidden');

   $("#btn-login").click(function(){
     $("div.box").removeClass("move-right");
     $("div.box").addClass("move-left");
     $('.second').addClass('hidden');
     $('.first').removeClass('hidden');
   });

   $("#btn-signup").click(function(){
     $("div.box").removeClass("move-left");
     $("div.box").addClass("move-right");
     $('.first').addClass('hidden');
     $('.second').removeClass('hidden');
   });
});

$(document).ready(function(){
   $('.second').addClass('hidden');

   $("#btn-login").click(function(){
     $("div.box").removeClass("move-right");
     $("div.box").addClass("move-left");
     $('.second').addClass('hidden');
     $('.first').removeClass('hidden');
   });

   $("#btn-signup").click(function(){
     $("div.box").removeClass("move-left");
     $("div.box").addClass("move-right");
     $('.first').addClass('hidden');
     $('.second').removeClass('hidden');
   });
});