javascript - JS/Jquery 魔法线在页面刷新时不起作用

Question

我有这个 css/jquery 菜单，有一条线(底部边框)在悬停时在菜单项下滑动:

<div class="nav-wrap">
<ul class="group" id="example-one">
<li><a href="http://www.link-host.com/">Home</a></li>
<li><a href="/web-hosting">Web Hosting</a></li>
<li><a href="/vps-hosting">VPS Hosting</a></li>
<li><a href="/clients/">Login</a></li>
<li><a href="/clients/index.php?fuse=support&view=SubmitTicketForm">Contact Us</a></li>
</ul>
</div>

这是 fiddle 中的菜单: http://jsfiddle.net/asJkH/

当其中一个链接被设置为当前页面(事件链接)时，该行保留在该链接下方，但如果您刷新页面，该行将向右移动到末尾并且它更长，这使得页面更长。

它似乎不能正常工作，但如果您将代码复制并粘贴到网页中并在本地或网络服务器上查看它，它就可以正常工作。

如果刷新页面，如何阻止它在错误的位置显示行？

Answer 1

不管你怎么说，当你在本地查看页面时问题仍然存在。单击链接时，如果在导航时将鼠标指示器移向菜单，就会发现问题；线去任何地方。

看来您应该更改.hover 函数。当您编写 $("#example-one li").find("a") 时，您得到了一个数组，我认为您应该选择一个唯一链接。我的建议是改用 $("#example-one .current_page_item").find("a")。