我的页面上有两个表单,并有一个淡出当前表单并带来另一个表单的按钮。基本上,这两种形式分别是登录和注册。单击时按钮可在两个按钮之间切换。这是发生的事情:
问题出现了,我希望表格最后是当前的表格,即使在页面重新加载后也是如此。
HTML:
<section id="content">
<div id="logo" style="margin-left: 0;"></div>
<div id="container">
<form id="sign_up" action="login.php" method="post">
<table style="margin: 0px auto;">
<tr>
<td align="center"> <span style="font-weight: bold;font-size: 2em; color: Gray;">Sign Up</span>
</td>
<tr>
<td>
<input type="text" placeholder="Username" name="username" required="required" />
</td>
</tr>
<tr>
<td>
<input type="password" placeholder="Password" name="password" required="required" />
<br />
</td>
</tr>
<tr>
<td>
<input class="input" type="password" placeholder="Confirm Password" name="confirm_password" required="required" />
<br />
</td>
</tr>
<tr>
<td>
<br/>
</td>
</tr>
<tr align="right">
<td>
<input class="btn" type="submit" value="Sign Up" name="submit_sign_up">
</td>
</tr>
</table>
</form>
<form id="sign_in" action="login.php" method="post">
<table style="margin: 0 auto;">
<tr>
<td align="center"> <span style="font-weight: bold;font-size: 2em; color: Gray;">Sign In</span>
</td>
<tr>
<td>
<input class="input" type="text" placeholder="Username" name="username" required="required" />
</td>
</tr>
<tr>
<td>
<input class="input" type="password" placeholder="Password" name="password" required="required" />
<br />
</td>
</tr>
<tr>
<td>
<br/>
</td>
</tr>
<tr align="right">
<td>
<input class="btn" type="submit" value="Sign In" name="submit_sign_in">
</td>
</tr>
</table>
</form>
<br/>
<input id="sign_up_btn" class="btn" type="submit" style=" font-weight:bold; height:40px; width: 292px;" value="Create An Account"></input>
</div>
</section>
CSS:
#content {
margin-top: 10%;
}
#container {
margin: 0 auto;
width: 80%;
text-align: center;
}
input[type=text], input[type=password] {
width: 250px;
min-height: 25px;
border-radius: 3px;
border: 0;
padding: 7px;
font-family: Calibri;
font-size: 20px;
box-shadow: 0px 0px 3px 1px #aaa inset;
box-sizing: border-box;
}
#sign_in, #sign_up {
border: 1px solid #4f4f4f;
border-radius: 10px;
margin: 0 auto;
height: 200px;
width: 292px;
padding: 10px;
background-color: #eee;
border: 0px;
box-shadow: 0px 0px 15px 1px #000;
}
#sign_up {
display: none;
height: 250px;
}
JS:
jQuery(function ($) {
var $sUp = $("#sign_up"),
$sIn = $("#sign_in");
$("#content").on('click', "#sign_up_btn", function () {
$sIn.stop().fadeOut(800, function () {
$sUp.fadeIn(800);
});
$(this).stop().fadeOut(800, function () {
$(this).attr({
value: "Already have an account?",
id: "sign_in_btn"
}).fadeIn(800);
});
}).on('click', "#sign_in_btn", function () {
$sUp.stop().fadeOut(800, function () {
$sIn.fadeIn(800);
});
$(this).stop().fadeOut(800, function () {
$(this).attr({
value: "Create An Account",
id: "sign_up_btn"
}).fadeIn(800);
});
});
});
答案 0 :(得分:1)
最简单的方法是使用localStorage
或sessionStorage
来保存表单的状态。如果您想要执行更多操作,可能需要考虑寻找处理页面状态的框架。
gollowing在每个事件处理程序中设置lastForm
中localStorage
的值。定义处理程序后,如果localStorage.lastForm
等于sign_up
,则会更改当前表单。
jQuery(function ($) {
var $sUp = $("#sign_up"),
$sIn = $("#sign_in");
$("#content").on('click', "#sign_up_btn", function () {
$sIn.stop().fadeOut(800, function () {
$sUp.fadeIn(800);
});
$(this).stop().fadeOut(800, function () {
$(this).attr({
value: "Already have an account?",
id: "sign_in_btn"
}).fadeIn(800);
});
localStorage.lastForm = 'sign_up';
}).on('click', "#sign_in_btn", function () {
$sUp.stop().fadeOut(800, function () {
$sIn.fadeIn(800);
});
$(this).stop().fadeOut(800, function () {
$(this).attr({
value: "Create An Account",
id: "sign_up_btn"
}).fadeIn(800);
});
localStorage.lastForm = 'sign_in';
});
if (localStorage.lastForm == 'sign_up') {
$sIn.fadeOut(0);
$sUp.fadeIn(0);
}
});