2017-10-16 78 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或其他唯一標識符。

相關問題