更改并保持导航菜单中的活动类，点击并刷新

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); 
    });