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">Customer</li>
                <li rel="vouchpanel4">Merchant</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>

js

<script type="text/javascript">
// 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');
        });
    });
});

</script>

Answer 1

我认为您需要使用Ajax。 http://api.jquery.com/jQuery.ajax/，以便您无需刷新当前页面即可发送数据。

Answer 2

1）更改标签后，使用以下代码将其rel属性保存在本地存储中

var relAtt = $(this).attr('rel');
localStorage.setItem("current_tab", relAtt);

2）刷新页面后，检查设置的current_tab值，然后添加活动类，请参见以下代码

$(document).ready(function(){
   var current_tab  = localStorage.getItem("current_tab");
   var element =  $(".tab-login").find("[rel="+current_tab+"]").addClass('active');

})

以供参考：https://www.w3schools.com/jsref/prop_win_localstorage.asp

如何使用本地存储存储最近提交的标签或刷新标签

2 个答案: