javascript - 如何获取导航栏上的当前元素并保存在 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/