Question

我在重新加载页面后在点击事件上保留添加的课程时遇到问题。

我们假设我有这样的标记：

<ul class="menu">
  <a class="partial-link" href="{% url 'payment-technology-mainpage' %}"><li class="menu-first"><span class="line">ONE</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'insurance_mainpage' %}"><li class="menu-first"><span class="line">TWO</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'admin_mainpage' %}"><li class="menu-first"><span class="line">THREE</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'bok_mainpage' %}"><li><span class="line">FOUR</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'regio_dashboard' %}"><li class="menu-last"><span class="line">FIVE</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'intercity_mainpage' %}"><li class="menu-last"><span class="line">SIX</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'tickets-mainpage' %}"><li class="menu-last"><span class="line">SEVEN</span><span class="arrow">&rarr;</span></li></a>
  <a class="partial-link" href="{% url 'angular-tickets' %}"><li class="menu-last"><span class="line">EIGHT</span><span class="arrow">&rarr;</span></li></a>
</ul>

我想在“a”元素中将“active”类添加到“span”并在重新加载页面后保留它。我试着做这样的事情：

var menuItem = $("span.line");
menuItem.on("click", function(e) {
   menuItem.removeClass("active");
   $(this).addClass("active");
});

但它不起作用:( 我会对任何想法感激不尽。

修改或者也许您有任何其他解决方案，使菜单项点击后点亮？问题是我希望它们在页面重新加载后保持颜色。

Answer 1

HTML是无状态的，这意味着一旦刷新页面，它就会被重新创建，并“忘记”上一次会话期间可能发生的任何变化。

正如Carsten在评论中提到的那样，localStorage是一个选项（尽管我对它的实现并不是很熟悉）。

或者，您可以存储每次选择不同menuItem时更新的cookie。大多数现代浏览器都启用了cookie，因此如果您在选择menuItem时设置cookie，则在页面加载时检查当前cookie，然后相应地突出显示menuItem。 cookie可以存储特定的menuItem的id或其他唯一标识符。

Jquery添加类并在页面重新加载后保留它

1 个答案: