У меня есть это меню 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>
вот меню в скрипке: http://jsfiddle.net/asJkH/
когда одна из ссылок установлена как текущая страница (активная ссылка), линия остается под этой ссылкой, но если вы обновляете страницу, линия перемещается вправо до конца, и это дольше, что делает страницу намного дольше.
он, похоже, не работает правильно в скрипке, но если вы скопируете и вставляете код на веб-страницу и просматриваете его локально или на веб-сервере, он отлично работает.
как я могу остановить его от отображения строки в неположенном месте, если страница обновлена?
Несмотря на то, что вы сказали, проблема сохраняется, когда вы просматриваете страницу локально. При щелчке ссылки, если вы перемещаете указатель мыши по направлению к меню во время навигации, вы видите проблему; линия идет куда угодно.
Кажется, вы должны изменить свои функции .hover
. Когда вы пишете $("#example-one li").find("a")
вас есть массив, и я думаю, вы должны выбрать уникальную ссылку. Мое предложение - использовать $("#example-one.current_page_item").find("a")
.