如何在更改页面时保持活动类

我正在尝试将一个活动类添加到导航项，具体取决于您的页面。 我正在使用这个脚本：

 $(document).ready(function () { $("#side-bar a").click(function () { var id = $(this); $(id).siblings().find(".active").removeClass("active"); $(id).addClass("active"); localStorage.setItem("selectedolditem", id); }); var selectedolditem = localStorage.getItem('selectedolditem'); if (selectedolditem !== null) { $(selectedolditem).siblings().find(".active").removeClass("active"); $(selectedolditem).addClass("active"); } });  

请参阅完整的jsfiddle： https ：//jsfiddle.net/ebo7hLo9/它添加了活动类，但它加载了新页面，它消失了。 我究竟做错了什么？

Answer 1

https://jsfiddle.net/ebo7hLo9/10/ – 这是一个小提琴！

 $(document).ready(function () { $("#side-bar a").click(function () { var id = $(this); $(".active").removeClass("active"); $(id).addClass("active"); localStorage.setItem("selectedolditem", $(id).text()); }); var selectedolditem = localStorage.getItem('selectedolditem'); if (selectedolditem !== null) { $("a:contains('" + selectedolditem + "')").addClass("active"); } }); 

您的代码在记住要抓取的元素时遇到了问题。 我认为这是由于网络存储API不熟悉对象。 相反，我从选中的元素中获取文本，将其存储在localStorage中，并在页面加载时将其与正确的元素匹配。 还有一部分代码正在处理在所选元素的siblings()中找到“活动”类并将其删除。 代码复杂很大程度上是不必要的。 我用类选择器$(".active")替换它

我没有在代码中更改它，但我建议不要使用localStorage支持sessionStorage以便存储将在tab / browser关闭时清除。

有关更多信息，请查看以前的stackoverflowpost： 在HTML5 localStorage中存储对象

Answer 2

这是一个可能的解决方案： https ： //jsfiddle.net/6yyLpma1/

  $("#side-bar a").click(function () { var id = $(this); $('#side-bar').find(".active").removeClass("active"); $(id).addClass("active"); localStorage.setItem("selectedolditem", id); }); 

而不是$(id).siblings()使用$('#side-bar') 。 在其他位置使用相同的逻辑。

Answer 3

使用数据元素和委托函数： https ： //jsfiddle.net/ebo7hLo9/12/

HTML

  
 
 
Home
 
Who we are
 
Services
 
What to expect
 
Representative clients
 
Success stories
 
Current litigation
 
What if you could not be a doctor?
 
 
  

使用Javascript

 $(document).ready(function () { $('#delegateAnchor').on('click', '#side-bar a', function() { var $this = $(this); var linkId = $this.data('desc'); $this.closest('ul').find('a').removeClass("active"); $this.addClass("active"); localStorage.setItem("menuSelection", linkId); }); var selectedLinkId = localStorage.getItem("menuSelection"); if (selectedLinkId !== null) { $('#side-bar a[data-desc="'+ selectedLinkId +'"]').trigger("click"); } });