如何使用本地存储在刷新时保存当前选项卡

Question

我创建了一个使用 javascript 的自定义选项卡，允许我在选项卡之间进行选择。 但是我在提交或刷新页面时无法保持当前选项卡处于打开状态。 我的 javascript 代码只允许我在选项卡之间切换。 我还尝试为选项卡创建本地存储，但似乎不起作用。有任何解决方案吗？

<div class=" tab-pan row justify-content-center">
        <div class="col-md-8">
                <h1 class="" style="font-size:36px; color:#333; text-align:center; line-height: 1.25em; ">Sign In To Your Account!</h1>
            <ul class="tab-login">
                <li rel="vouchpanel3" class="active">student</li>
                <li rel="vouchpanel4">teacher</li>
            </ul>
    <div id="vouchpanel3" class="pan active">

                <form method="POST" action="{{ route('customer.login') }}" style="margin-top:8%;">
                    @csrf

                    <div class="form-group row">

                        <div class="col-md-12">
                            <input id="email" style="height:4rem;font-size:16px;font-weight:400" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="Email" required autofocus>

                            @if ($errors->has('email'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('email') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group row">
                        {{-- <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label> --}}

                        <div class="col-md-12">
                            <input id="password" style="height:4rem; font-size:16px;font-weight:400" type="password" placeholder="Password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>

                            @if ($errors->has('password'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('password') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12">
                            <a class="btn btn-link" style="font-size:1.2rem; margin-left:-1%;" href="{{ route('customer.password.request') }}">
                                {{ __('Forgot Your Password?') }}
                            </a>
                        </div>
                    </div>

                    <div class="form-group row mb-0">
                        <div class="col-md-12">
                            <button type="submit" class="loginandregister" style="width:100%; height:3rem; font-size:18px; padding:2px 0px 2px 0;">
                                Sign In
                            </button>


                        </div>
                    </div>
                </form>
            </div>

---

<script type="text/javascript">
// this code is switching from tab to tab
// im in the class tab-panels > ul tab-vouch > grabing the li
$('.tab-pan .tab-login li').on('click', function(){

    var $panels = $(this).closest('.tab-pan');
    $panels.find('.tab-login li.active').removeClass('active');
    $(this).addClass('active');



    var loginpanelshow = $(this).attr('rel');

    $('.tab-pan .pan.active').stop().slideUp(300, function(){
        $(this).removeClass('active');

        $('#'+ loginpanelshow).slideDown(300, function(){
            $(this).addClass('active');
        });
    });

// this is the code that i attempted to use local storage to save on refresh
var relAtt = $(this).attr('rel');
    localStorage.setItem("current_tab", relAtt);
    console.log(relAtt);
$(document).ready(function(){
   var current_tab  = localStorage.getItem("current_tab");
   var element =  $(".tab-login li").find("[rel="+current_tab+"]").addClass('active');
    })
});

</script>

---

css

 <style>
    body{
        background-color: white;
    }
    .tab-login{
        width: 100%;
        display: grid;
        grid-template-columns: 50% 50%;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .tab-login li{
        text-align: center;
        line-height: 3em;
        font-size: 20px;
        font-weight: 400;
        text-transform: uppercase;
        list-style: none;
        cursor: pointer;
    }
    .tab-pan ul li.active{
        border-bottom: solid #CA3F3F;
        border-width:  0px 0 3px  ;
        padding-top: 1px;
        padding-bottom: 3px;
    }
    .tab-pan ul li{
        border-bottom: solid #d9d9d9;
        border-width:  0px 0 3px  ;
        padding-top: 1px;
        padding-bottom: 3px;

    }

    .tab-pan .pan{
        display: none;
    }
    .tab-pan .pan.active{
        display: block;
    }

    </style>

Answer 1

这里的问题是您的选择器没有找到正确的元素。 所以从那次点击开始，我上升到 DOM 以获取它的父级，然后根据current_tab找到 rel 。 尝试这个：

JSfiddle： http : //jsfiddle.net/gzhnrpj7/2/

HTML：

<div class=" tab-pan row justify-content-center">
  <ul class="tab-login">
    <li rel="vouchpanel3" class="vouchpanel3 active">student</li>
    <li rel="vouchpanel4" class="vouchpanel4">teacher</li>
  </ul>
</div>

CSS：

body{
        background-color: white;
    }
    .tab-login{
        width: 100%;
        display: grid;
        grid-template-columns: 50% 50%;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .tab-login li{
        text-align: center;
        line-height: 3em;
        font-size: 20px;
        font-weight: 400;
        text-transform: uppercase;
        list-style: none;
        cursor: pointer;
    }
    .tab-pan ul li.active{
        border-bottom: solid #CA3F3F;
        border-width:  0px 0 3px  ;
        padding-top: 1px;
        padding-bottom: 3px;
    }
    .tab-pan ul li{
        border-bottom: solid #d9d9d9;
        border-width:  0px 0 3px  ;
        padding-top: 1px;
        padding-bottom: 3px;

    }

    .tab-pan .pan{
        display: none;
    }
    .tab-pan .pan.active{
        display: block;
    }

JS：

$(document).ready(function() {
    $('.tab-login li').removeClass('active');

    var current_tab = localStorage.getItem("current_tab"),
        element     = $(".tab-login li")
                      .parent('ul')
                      .find("[rel="+current_tab+"]")
                      .addClass('active');

  // this code is switching from tab to tab
  // im in the class tab-panels > ul tab-vouch > grabing the li
  $('.tab-pan .tab-login li').on('click', function() {
    var $panels = $(this).closest('.tab-pan');
    $panels.find('.tab-login li.active').removeClass('active');
    $(this).addClass('active');

    var loginpanelshow = $(this).attr('rel');

    $('.tab-pan .pan.active').stop().slideUp(300, function(){
      $(this).removeClass('active');
      $('#'+ loginpanelshow).slideDown(300, function(){
        $(this).addClass('active');
      });
    });

    // this is the code that i attempted to use local storage to save on refresh
    var relAtt = $(this).attr('rel');
    localStorage.setItem("current_tab", relAtt);
    console.log(relAtt);
    });
});

单击小提琴，该部分将加载。 要对此进行测试，您可以打开控制台，转到“应用程序”选项卡，然后单击“本地存储”。 当你点击其中一个选项卡，打本地存储刷新图标，你会发现价值变动从vouchpanel3到vouchpanel4反之亦然。 单击选项卡后，您可以通过再次运行 jsfiddle 来进一步测试。