Волшебная линия JS / Jquery не работает при обновлении страницы

0

У меня есть это меню 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/

когда одна из ссылок установлена как текущая страница (активная ссылка), линия остается под этой ссылкой, но если вы обновляете страницу, линия перемещается вправо до конца, и это дольше, что делает страницу намного дольше.

он, похоже, не работает правильно в скрипке, но если вы скопируете и вставляете код на веб-страницу и просматриваете его локально или на веб-сервере, он отлично работает.

как я могу остановить его от отображения строки в неположенном месте, если страница обновлена?

1 ответ

0

Несмотря на то, что вы сказали, проблема сохраняется, когда вы просматриваете страницу локально. При щелчке ссылки, если вы перемещаете указатель мыши по направлению к меню во время навигации, вы видите проблему; линия идет куда угодно.

Кажется, вы должны изменить свои функции .hover. Когда вы пишете $("#example-one li").find("a") вас есть массив, и я думаю, вы должны выбрать уникальную ссылку. Мое предложение - использовать $("#example-one.current_page_item").find("a").

Ещё вопросы

Сообщество Overcoder
Наверх
Меню