Javascript 基于本地存储显示内容和选项卡

我用的是这个主题： 我想显示基于本地存储的选项卡，以便在用户引用页面时保留选项卡和内存。 我不明白为什么当用户点击一个新的标签时，网站也会显示以前的内容和标签

   $(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 -->

由于您正在单击“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类，这也会更有意义。这将允许您使用代码，即使您决定添加更多选项卡，也不需要修改代码

例如，请参见此手风琴：

---

您在#选项卡1等上有ClickHandler，但html没有这些ID。抱歉，我编辑了html。实际的html现在已更新