2017-10-16 46 views
0

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

让我们假设我有类似这样的标记:

<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> 

我想补充类“积极”到“跨度”内“一”元素,并保持页面刷新后。 我试图做这样的事情:

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

但它不工作:( 我将是任何想法感谢

编辑 或者,也许你有任何其他的解决方案。在点击它们之后使菜单项变成颜色问题是我希望它们在页面重新加载后保持颜色

+1

试试Google localStorage –

+0

您不能在页面重新加载时保留动态添加的类...... – Abhi

+0

'localStorage'或'cookie'将为您节省! – Pedram

回答

1

HTML是无状态的,这意味着一旦刷新页面,它将被重新创建并“忘记”可能发生的任何更改以前的 页面会话。

正如Carsten在他的评论中提到的,localStorage是一个选项(尽管我不太熟悉它的实现)。

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