单击 link 或 reload/refresh 页面时列表项保持打开状态

Question

我希望我的无序列表在单击 list-item/link 或 refresh/reload page/site 时保持打开状态。 list-item/link 应该有 class 活动。

看到一些东西，我可以将数据存储在local-storage，但我不知道如何。

HTML:

<aside id="sidebar" class="col-12 col-lg-4 col-xxl-3">
  <div class="just-padding">

    <ul>
      <li  id="server">Server</li>
        <ul>
          <li id="multiCollapseExample1">
            <span>
              <a href="{{ route('ubuntustart') }}">Start</a>
            </span>
          </li>
          <li id="multiCollapseExample2">
            <span>
              <a href="{{ route('ubuntuinit') }}">Security</a>
            </span>
          </li>
        </ul>
    
      <li id="git">GIT</li>
        <ul>
          <li id="multiCollapseExample3">
            <span>
              <a href="#1">blub</a>
            </span>
          </li>
          <li id="multiCollapseExample4">
            <span>
              <a href="#2">wurst</a>
            </span>
          </li>
        </ul>
    </ul>
  </div>
</aside>

jQuery:

$(document).ready(function () {
   
    $("#multiCollapseExample1").hide();
    $("#multiCollapseExample2").hide();
    $("#multiCollapseExample3").hide();
    $("#multiCollapseExample4").hide();


    $("#server").click(function() {
        
        localStorage.setItem('clickedItem', '#server');
        
        $("#multiCollapseExample3, #multiCollapseExample4").hide();
        $("#multiCollapseExample1, #multiCollapseExample2").show();
        
    });

    $("#git").click(function() {
        
        localStorage.setItem('clickedItem', '#git');
        
        $("#multiCollapseExample1, #multiCollapseExample2").hide();
        $("#multiCollapseExample3, #multiCollapseExample4").show();
        
    });

    $("#multiCollapseExample1").click(function() {

        localStorage.setItem('clickedSub', '#multiCollapseExample1');

        $("#multiCollapseExample1, #multiCollapseExample2").show();
        
    });

    $("#multiCollapseExample2").click(function() {

        localStorage.setItem('clickedSub', '#multiCollapseExample2');

        $("#multiCollapseExample1, #multiCollapseExample2").show();
        
    });



    if(localStorage.getItem('clickedSub')) {

        var test = $(localStorage.getItem('clickedSub')).click()
        
        $(test).addClass("active");
    
    };

    
    
    if(localStorage.getItem('clickedItem')) {

        $(localStorage.getItem('clickedItem')).click()
        
        $(this).addClass("active");
    
    };


});

我已经编辑了我的答案（jquery 部分）

一个新的 JSFiddle： JSFiddle

如果我返回（向后/浏览器箭头），红色的活动列表项不会保存状态。但它保持状态 reload/refresh.

Answer 1

我已经按照你的要求修改了你的代码。请检查 jsfiddle

我所做的只是将点击的项目设置为本地存储。我已经保存了它的id。。

然后当刷新页面时，我检查 localstorage 是否存在添加到 localstorage 的密钥（如果您单击某个项目，它应该存在）。然后根据该值，我通过 click() 方法单击了相关项目。

刚刚将您的Jquery修改为如下

$(document).ready(function () {

$("#multiCollapseExample1").hide();
$("#multiCollapseExample2").hide();
$("#multiCollapseExample3").hide();
$("#multiCollapseExample4").hide();


$("#server").click(function() {
    localStorage.setItem('clickedItem', '#server');
    $("#multiCollapseExample3, #multiCollapseExample4").hide();
    $("#multiCollapseExample1, #multiCollapseExample2").show();
    
});

$("#multiCollapseExample1").click(function() {
    $("#multiCollapseExample1, #multiCollapseExample2").show();
    $("#multiCollapseExample1").addClass('active');
    
});

$("#git").click(function() {
    localStorage.setItem('clickedItem', '#git');
    $("#multiCollapseExample1, #multiCollapseExample2").hide();
    $("#multiCollapseExample3, #multiCollapseExample4").show();
    
});


$("li span").click(function() {
      
    $(this).addClass("active");

});


  if(localStorage.getItem('clickedItem')) {
    $(localStorage.getItem('clickedItem')).click()
   }

});

顺便说一句，我不建议你使用id来点击事件。因此，如果有 100 个项目，那么根据您的代码，您需要编写越来越多的逻辑。而不是使用另一种机制来实现这一点。谢谢

单击 link 或 reload/refresh 页面时列表项保持打开状态

list item stay open on click a link or reload/refresh page

javascript

jquery

local-storage

laravel