刷新页面时确保保持在同一个 div 区域答案

【问题标题】：When refresh page make sure stay in same div area刷新页面时确保保持在同一个 div 区域
【发布时间】：2016-08-28 04:22:25
【问题描述】：

当我单击下一步按钮并进入第 2 步时，如果我重新加载页面，我想确保它保持在我所在的同一个 div 上。

我使用的 2 个 div 是 join_form_1 和 join_form_2

当我重新加载页面时，它会回到第一个 div

如何让它留在我所在的 div 上？

代码笔Example Here

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

<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>

【问题讨论】：

使用会话或本地存储来跟踪位置
根据用户体验，如果他点击reload 按钮，我猜他想在屏幕上看到first ..
可能重复：stackoverflow.com/questions/484463/…
@BurakKarakuş 我不这么认为......
为什么？这两个问题似乎都在问同样的事情。

标签： javascript jquery

【解决方案1】：

您可以使用javascript cookie API here

所以当用户点击“下一步”时

 Cookies.set('active', 'join_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");
}

Here 正在使用 codepen。

【讨论】：

【解决方案2】：

最简单、最可靠的方法是使用Fragment_identifier 和:target 伪选择器。

即使 cookie 被禁用，这也将起作用。而且由于您使用的是引导程序，因此很容易将 <a> 标记设置为按钮。

例如：

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>

【讨论】：