目前我有两种形式。登录表格和注册表。 我使用 Javascript Toggle 在它们之间切换。但现在我想添加第三种形式。我怎样才能做到这一点?因此,我希望能够从登录表单切换到注册表单或忘记密码表单,然后从这两个表单切换回登录表单。
在这里您可以看到我现在在 View 中是如何做到的:
(我的部分 View 中唯一的东西是底部带有 a
标记的表单,用于激活 .js 代码)
<div class="login-page">
<div class="form">
<!--Login Form-->
@{await Html.RenderPartialAsync("_LoginView"); }
<!--Register Form-->
@{await Html.RenderPartialAsync("_RegisterView"); }
</div>
</div>
还有我的 .js 文件:
//Toggle between login and registration form
$('.switch a').click(function () {
$('form').animate({ height: "toggle", opacity: "toggle" }, "slow");
});
以及 .css 代码:
.register-form {
display: none;
}
最佳答案
根据我从您的问题中获得的信息,我认为您的意图是动画显示多种形式之间的切换。这将需要用 JavaScript 编写更多的逻辑。
根据您已经使用的开关机制,我想出了这个解决方案:
$("a[data-toggle]").on("click", function(e) {
var selector = $(this).data("toggle");
if ($(selector).css('display') != 'block') {
$('form').hide();
}
$(selector).animate({height: "toggle", opacity: "toggle"}, "slow");
});
.switch a {
width: 100px;
height: 20px;
background: grey;
text-align: center;
margin: 10px;
padding: 10px;
cursor: pointer;
}
form {
width: 100px;
height: 100px;
display: none;
}
.form1 {
background: red;
}
.form2 {
background: blue;
}
.form3 {
background: green;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
crossorigin="anonymous"></script>
<div class="login-page">
<div class="switch">
<a data-toggle=".form1">Form1</a>
<a data-toggle=".form2">Form2</a>
<a data-toggle=".form3">Form3</a>
</div>
<div class="form">
<form class="form1"></form>
<form class="form2"></form>
<form class="form3"></form>
</div>
</div>
这是一种高效且易于实现的方式。 您可以查看jsFiddle here
关于Javascript 动画切换 3 种形式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52384228/