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

Question

我正在尝试使用 css 和 js 创建导航菜单。我已经为必要的类设置了样式，并且 nav 与 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显示为活动类链接，同时删除之前的活动类链接1。

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