目前我有2个表格。登录表格和登记表格。我使用Javascript Toggle在它们之间切换。但现在我要添加第3种形式。我怎样才能做到这一点?因此,我希望能够从“登录”表单切换到“注册表单”或“忘记密码”表单,然后从这两个表单切换回“登录”表单。
在这里,您可以看到我在视图中的操作方式:
(我的部分视图中唯一的东西是底部带有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
在更多元素之间切换的最佳方式是:
active元素有一个active-class(is-active)所有其他元素都用css隐藏。
当有人点击“显示表单1”然后删除所有活动类并将其仅添加到表单1。
要动画它使用css过渡。
function hideAllForms() {
$('.form').removeClass('is-active');
}
$('.js-show-form').on('click', (event) => {
const $el = $(event.currentTarget);
hideAllForms();
$('#form-' + $el.data('form')).addClass('is-active');
});
.form { display:none; background-color: red; }
.form.is-active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form id="form-1" class="form is-active">form1</form>
<form id="form-2" class="form" >form2</form>
<form id="form-3" class="form" >form3</form>
</div>
<a class="js-show-form" data-form="1">show form 1</a><br />
<a class="js-show-form" data-form="2">show form 2</a><br />
<a class="js-show-form" data-form="3">show form 3</a><br />
你可以使用这个简单的代码:
$(function(){
$('form').hide();
$('form').first().show();
//Toggle between login and registration form
$('a.switch').on('click', function () {
var visibleForm = $('form:visible');
$(visibleForm).hide();
if($(visibleForm).next().length > 0)
{
$(visibleForm).next().animate({height: "toggle", opacity: "toggle"}, "slow");
}
else
{
$(visibleForm).siblings('form:first').animate({height: "toggle", opacity: "toggle"}, "slow");
}
});
});
这是HTML:
<div class="login-page">
<div class="form">
<!--Login Form-->
@{await Html.RenderPartialAsync("_LoginView"); }
<!--Register Form-->
@{await Html.RenderPartialAsync("_RegisterView"); }
<!--Another Form-->
...
<!--Another Form-->
...
<!--Another Form-->
...
<!--Another Form-->
...
<!--Another Form-->
...
<!--Another Form-->
...
</div>
</div>
<a href='#' class='switch'>Switch</a>