更改並保持導航菜單中的活動類，點擊並刷新

Question

我想用css和js創建一個導航菜單。我已經設計了必要的類，並且導航使用了js動畫，但是我遇到了將用戶的li類更改爲活動onclick的問題，並將其保存在本地存儲中，以便在頁面刷新時保留它。

這是我現在有代碼： http://codepen.io/anon/pen/wfpti

的Javascript：

var foundActive = false, activeElement, linePosition = 0, menuLine = $("#navmenu #menu-line"), lineWidth, defaultPosition, defaultWidth; 

$("#navmenu > ul > li").each(function() { 
    if ($(this).hasClass('active')) { 
    activeElement = $(this); 
    foundActive = true; 
} 
}); 

HTML：

<div id='navmenu'> 
<ul> 
    <li class='active'><a href='link1.php'>link1</a></li> 
    <li><a href='link2.php'>link2</a></li> 
    <li><a href='link3.php'>link3</a></li> 
    <li><a href='link4.php'>link4</a></li> 
    <li><a href='link5.php'>link5</a></li> 
    <li><a href='link6.php'>link6</a></li> 
    <li><a href='link7.php'>link7</a></li> 
</ul> 
</div> 

我想實現的是，當我按下，爲例如，「link3」是它轉到link3.php，然後導航菜單顯示link3作爲活動類鏈接，同時刪除以前的活動類for l ink1。

Answer 1

只要嘗試在點擊事件上添加類，此功能將停止您的活動鏈接。這可能適用於你。如果您想在刷新頁面後添加活動類，請將其存儲到JavaScript Cookie中。

$("#navmenu > ul > li").click(function() 
    { 
      $(this).closest('ul').find('li').each(function() 
      { 
       $(this).removeClass('active'); 
      }); 
      $(this).addClass('active'); 
      defaultWidth = lineWidth = activeElement.width(); 
      defaultPosition = linePosition = activeElement.position().left; 
      menuLine.css("width", lineWidth); 
      menuLine.css("left", linePosition); 
    });