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显示为活动类链接，同时删除之前的活动类LINK1。

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

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

1 个答案: