Отображение содержимого и вкладки на основе localStorage

Question

Я использовал эту тему: https://codyhouse.co/gem/responsive-tabbed-navigation/ Я хочу отображать вкладку на основе локального хранилища, чтобы хранить вкладку и в памяти, когда пользователь обновляет страницу. Я не понимаю, почему сайт отображает предыдущее содержимое и вкладку, когда пользователь нажимает новую вкладку?

   $(document).ready(function(){

        $("#tab-1").click(function() {
          window.localStorage.setItem("tab", "tab-1");
          window.localStorage.setItem("content", "tab-dashboard");
          $( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
          $( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
        });
        $("#tab-2").click(function() {
          // Store
          window.localStorage.setItem("tab", "tab-2");
          window.localStorage.setItem("content", "tab-workhours");
          $( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
          $( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
        });
        $("#tab-3").click(function() {
          // Store
          window.localStorage.setItem("tab", "tab-3");
          window.localStorage.setItem("content", "tab-my-profile");
          $( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
          $( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
        });
        $("#tab-4").click(function() {
          window.localStorage.setItem("tab", "tab-4");
          window.localStorage.setItem("content", "tab-admin");
          $( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
          $( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
        });
        $("#tab-5").click(function() {
          window.localStorage.setItem("tab", "tab-5");
          window.localStorage.setItem("content", "tab-company");
          $( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
          $( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
        });


        function defaultTab(){
            var defaultTabName = document.getElementById("tab-1");
        }

        function getTab(){
            var item = window.localStorage.getItem("tab");
            console.log(item);
            return item;
        }

        function getContent(){
            var item = window.localStorage.getItem("content");
            console.log(item);
            return item;
        }

        function activeTab(){
            console.log(getTab());
            if(false){
                defaultTab();
            }else{
                //var activatedTabName = document.getElementById("" + getTab())
                $( "#" + getTab() ).addClass( "cd-tabs__item--selected" );
                $( "#" + getContent() ).addClass( "cd-tabs__panel--selected" );
                window.localStorage.removeItem("content");
                window.localStorage.removeItem("tab");
            }
        }

        activeTab();



    });

Мне нужно щелкнуть вкладку, отображаемую в последний раз, из локального хранилища. Как это можно реализовать?

Вот это html

<nav class="cd-tabs__navigation">
    <ul class="cd-tabs__list" id="myTab">
        <li>
            <a href="#tab-dashboard" class="cd-tabs__item cd-tabs__item--selected" style="padding: 6px;" id="tab-1">
                <img src="images/dashboard.png" width="50px" height="50px" style="padding: 6px;">
            </a>
        </li>
        <li>
            <a href="#tab-workhours" class="cd-tabs__item" id="tab-2">
                <img src="/images/working-hours.png" width="50px" height="50px" style="padding: 6px;"/>
            </a>
        </li>

        <li>
            <a href="#tab-my-profile" class="cd-tabs__item" id="tab-3">
                <img src="/images/user.png" width="50px" height="50px" style="padding: 6px;"/>
            </a>
        </li>

        <li>
            <a href="#tab-admin" class="cd-tabs__item" id="tab-5">
                <img src="/images/settings.png" width="50px" height="50px" style="padding: 6px;"/>
            </a>
        </li>
        <li>
            <a href="#tab-company" class="cd-tabs__item" id="tab-5">
                <img src="/images/company.png" width="50px" height="50px" style="padding: 6px;"/>
            </a>
        </li>
    </ul> <!-- cd-tabs__list -->
</nav>

<ul class="cd-tabs__panels">
    <li id="tab-dashboard" class="cd-tabs__panel cd-tabs__panel--selected text-component">
     <!-- some content -->
    </li>

    <li id="tab-workhours" class="cd-tabs__panel text-component">
        <!-- some content -->
    </li>

    <li id="tab-my-profile" class="cd-tabs__panel text-component">
        <!-- some content -->
    </li>

    <li id="tab-admin" class="cd-tabs__panel text-component">
        <!-- some content -->
    </li>


    <li id="tab-company" class="cd-tabs__panel text-component">
      <!-- some content -->
    </li>
</ul> <!-- cd-tabs__panels -->

Answer 1

Поскольку вы нажимаете на # tab-dashboard, то # tab-1 не может быть запущен. Это означает, что вам нужно изменить # tab-dashboard на # tab-1 или наоборот в вашем коде, чтобы он функционировал.

$("#tab-1").click(function() {
  window.localStorage.setItem("tab", "tab-1");
  window.localStorage.setItem("content", "tab-dashboard");
  $( ".cd-tabs__list > li > a" ).removeClass("cd-tabs__item");
  $( ".cd-tabs__panel" ).removeClass("cd-tabs__panel");
});

И в HTML, в этом случае

<a href="#tab-1" class="cd-tabs__item cd-tabs__item--selected" style="padding: 6px;" id="tab-1">
    <img src="images/dashboard.png" width="50px" height="50px" style="padding: 6px;">
</a>

Редактировать: для вас также было бы гораздо разумнее связываться не с href, а с чем-то другим, например с классом js. Это позволит вам использовать свой код, даже если вы решите добавить больше вкладок, и не будет необходимости изменять код.

См. Этот аккордеон для примера: https://codepen.io/Ravyre/pen/bYQOMx