[英]When refresh page make sure stay in same div area
When I click on my next button and it goes to step 2 and if I reload the page I would like to make sure it stays on the same div that I am on. 当我单击我的下一个按钮,然后转到步骤2,并且如果我重新加载页面,我想确保它停留在我所在的div上。
The 2 divs I use are join_form_1
and join_form_2
我使用的2个div是
join_form_1
和join_form_2
At the moment it when I reload page it goes back to first div 目前,当我重新加载页面时,它会回到第一格
How can I make it stay on the div I am on? 如何让它停留在我所在的div上?
Codepen Example Here Codepen 示例在这里
$(document).ready(function(){
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
$("#next").click(function(){
$("#step_1_link").removeClass("active");
$("#step_2_link").addClass("active");
$("#join_form_1").hide();
$("#join_form_2").show();
});
});
HTML 的HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="heading-message">
<div class="text-center">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="text-center">
<h1>Request A Admin Member Login</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<ol class="steps list-inline">
<li id="step_1_link">
<a href="">Step 1: Set up a personal account</a>
</li>
<li id="step_2_link">
<a href="">Step 2: Choose profile picture</a>
</li>
</ol>
<div id="join_form_1">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" placeholder="" />
</div>
<div class="form-group">
<button type="button" class="btn btn-default" id="next">Next</button>
</div>
</div><!-- Setup_1 -->
<div id="join_form_2">
<div class="form-group">
<label>Upload A Image</label>
<input type="file" name="userfile" size="50" />
</div>
</div><!-- Setup_1 -->
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box">
<h2>You'll Love This Forum</h2>
</div>
</div>
</div>
</div>
You can use javascript cookie API here 您可以在此处使用javascript cookie API
So when user clicks 'Next' 因此,当用户单击“下一步”时
Cookies.set('active', 'join_form_2');
Than if user clicked in the previous session, show form 2. 如果用户在上一个会话中单击,则显示表格2。
if (Cookies.get('active') == 'join_form_2') {
$("#join_form_1").hide();
$("#step_1_link").removeClass("active");
} else {
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
}
The easiest and most reliable way to do this is to use Fragment_identifier along with :target pseudo selector. 最简单,最可靠的方法是使用Fragment_identifier以及:target伪选择器。
This will work even if cookies are disabled. 即使禁用cookie,它也将起作用。 And since you're using bootstrap, it's easy to style
<a>
tags like buttons. 而且由于您使用的是引导程序,因此可以轻松设置
<a>
标签(如按钮)的样式。
For example: 例如:
if (!window.location.hash) {
window.location.hash = 'step1';
.steps:not(:target) {
display: none;
}
<a href="#step1">step1</a>
<a href="#step2">step2</a>
<div id="step1" class="steps">Step1</div>
<div id="step2" class="steps">Step2</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.