Как сохранить недавно отправленную вкладку или вкладку обновления, используя локальное хранилище - PullRequest
0 голосов
/ 25 октября 2018

Я создал пользовательские вкладки, которые работают с 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>

Ответы [ 2 ]

0 голосов
/ 25 октября 2018

1) Когда вы изменяете вкладку, сохраняете ее атрибут rel в localstorage, используя следующий код,

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

0 голосов
/ 25 октября 2018

Я думаю, вам нужно использовать Ajax.http://api.jquery.com/jQuery.ajax/, Чтобы вы могли отправлять данные без обновления текущей страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...