如何在導航欄上獲取當前元素並保存在localStorage上？

Question

我有一個導航欄，它具有頁面鏈接，我想在單擊時保存當前的導航，這是因為其他頁面具有相同的菜單。

<ul>
 <li id="nav1" class="navigation-item"><a href="#" >Nav 1</a></li>
 <li class="navigation-item"><a href="#" >Nav 2</a></li>
 <li class="navigation-item"><a href="#" >Nav 2</a></li>
 <li class="navigation-item"><a href="#" >Nav 2</a></li>
</ul>

我嘗試從$(this) ，然后在頁面重新加載后使用以添加活動類。

$(document).ready(function () {

  $('.navigation-item').on('click', function (e) {
      var current = $( this );
      console.log(current);
      console.log(JSON.stringify(current));
      localStorage.setItem('activeTab', current);
  });

  var activeTab = localStorage.getItem('activeTab');

  if (activeTab) {
   // activeTab.addClass('active'); 
   // $('#nav1').parent().addClass('active'); 
      console.log(activeTab);
      $( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" );
  }

});

的jsfiddle

最好的祝福。

Answer 1

您需要存儲元素的索引：

$('.navigation-item').on('click', function (e) {
    var current = $(this );
    console.log(current);
    console.log(JSON.stringify(current));
    localStorage.setItem('activeTab', $('.navigation-item').index(current));

});

然后，使用索引取回元素：

var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
        activeTabEL = $('.navigation-item').eq(parseInt(activeTab));
   activeTabEL.addClass('active'); 
  // $('#nav1').parent().addClass('active'); 
    console.log(activeTabEL);
    $( "ul li.navigation-item" ).eq(parseInt(activeTab)).append( "<span> - 2nd!</span>" );
}

示例： https ： //jsfiddle.net/xmzb7hdk/7/

Answer 2

您不需要太多的JavaScript。 您可以使用HTML5自定義屬性來標識導航（ data-nav-item ）中的每個元素：

<ul>
    <li data-nav-item="nav-1" id="nav1" class="navigation-item"><a href="#" >Nav 1</a></li>
    <li data-nav-item="nav-2" class="navigation-item"><a href="#" >Nav 2</a></li>
    <li data-nav-item="nav-3" class="navigation-item"><a href="#" >Nav 2</a></li>
    <li data-nav-item="nav-4" class="navigation-item"><a href="#" >Nav 2</a></li>
</ul>

然后，只需三行JavaScript即可設置值：

$(document).on("click", "[data-nav-item]", function(event) {
    localStorage.setItem("activeTab", this.getAttribute("data-nav-item"));
});

之后，您可以使用以下命令識別活動導航

var activeTab = $("[data-nav-item='" + localStorage.getItem("activeTab") + "']")

Answer 3

您可以存儲id而不是存儲整個對象。 它簡化了檢索的使用。

在這里擺弄

HTML：

<ul>
  <li id="nav1" class="navigation-item"><a href="#" >Nav 1</a></li>
  <li id="nav2" class="navigation-item"><a href="#" >Nav 2</a></li>
  <li id="nav3" class="navigation-item"><a href="#" >Nav 3</a></li>
  <li id="nav4" class="navigation-item"><a href="#" >Nav 4</a></li>
</ul>

腳本：

$(document).ready(function () {

    $('.navigation-item').on('click', function (e) {
        var currentID = $(this).attr("id");
        console.log(currentID+" = stored to localStorage");
        localStorage.setItem('activeTab', currentID);

    });

    var activeTab = localStorage.getItem('activeTab');
    if (activeTab!="") {
        console.log(activeTab+" = retrieved form localStorage");
        $("#"+activeTab ).append( "<span> - active!</span>" );
        $("#"+activeTab ).addClass('active');
    }

});