Question

当我点击＆＃34;登录＆＃34;仅限按钮＆＃34; Form1＆＃34;应该是可见的＆＃34; Form2＆＃34;隐藏，点击＆＃34;注册＆＃34;按钮＆＃34; Form2＆＃34;可见和＆＃34; Form1＆＃34;隐藏，该怎么办？

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>

CSS：

div.box {
    width: 100px;
    height: 100px;
    padding:10px;
    background: red;
    position:relative;
    -webkit-transition: transform 2s ease; /* For Safari 3.1 to 6.0 */
    transition: transform 2s ease;
}

.move-right {
    -ms-transform: translateX(400px); /* IE 9 */
    -webkit-transform: translateX(400px); /* Safari */
    transform: translateX(400px);
}
.move-left {
    -ms-transform: translateX(0px); /* IE 9 */
    -webkit-transform: translateX(0px); /* Safari */
    transform: translateX(0px);
}

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>

Answer 1

您可以使用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");
      });
    });

我已通过此链接https://jsfiddle.net/eg8Lf86d/

进行了更改

Answer 2

试试这个：

$(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;
}

Answer 3

感谢朋友们快速回复，我设置了这段代码：

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

如何改变移动div的内在内容

3 个答案: