列表項在單擊鏈接或重新加載/刷新頁面時保持打開狀態

Question

如果我單擊列表項/鏈接或刷新/重新加載頁面/站點，我希望我的無序列表保持打開狀態。 列表項/鏈接應該激活 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

如果我返回 go（向后/瀏覽器箭頭），則紅色的活動列表項不會保存 state。 但它使 state 保持重新加載/刷新。

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

});

順便說一下，我不建議你使用 ids 來點擊事件。 因此，如果有 100 個項目，那么根據您的代碼，您需要編寫越來越多的邏輯。 而不是使用另一種機制來實現這一點。 謝謝