Comment sauvegarder l'onglet actuel lors de l'actualisation en utilisant le stockage local ?

Question

J'ai créé un onglet personnalisé qui fonctionne avec javascript et qui me permet de sélectionner entre les onglets. Mais j'ai des difficultés à garder l'onglet actuel ouvert lors de la soumission ou du rafraîchissement de la page. Mon code javascript ne me permet que de passer d'un onglet à l'autre. J'ai également essayé de créer un stockage local pour les onglets, mais cela ne semble pas fonctionner.

<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

Le problème ici était que votre sélecteur ne trouvait pas le bon élément. Donc, à partir de ce clic, j'ai remonté le DOM pour trouver le parent de l'élément, puis j'ai trouvé la relation en me basant sur current_tab . Essayez ceci :

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);
    });
});

Cliquez sur le violon et la section se chargera. Pour tester cela, vous pouvez ouvrir votre console, aller dans l'onglet Application, et cliquer sur Local Storage. Lorsque vous cliquez sur l'un des onglets et que vous appuyez sur l'icône de rafraîchissement pour le stockage local, vous remarquerez que la valeur passe de vouchpanel3 à vouchpanel4 ou vice versa. Une fois que vous avez cliqué sur un onglet, vous pouvez le vérifier en exécutant à nouveau le jsfiddle.