Подсветка навигации JQuery с помощью dropmenu.js

Я новичок в JQuery, но нахожу его действительно полезным. Я пытаюсь выделить элемент навигации для текущей страницы, на которой находится пользователь, используя JQuery. Я пробовал несколько методов, которые я нашел, которые похожи, но я не могу заставить что-либо работать совершенно правильно, и мне интересно, потому что я использую dropmenu.js, и это может вызывать некоторые проблемы.

Я создал класс CSS с именем .selected, который делает то, что мне нужно, при ручном применении к элементу навигации. Затем у меня есть следующий код JQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('#nav-one li a').click(function() {
$(this).closest("li").addClass('selected').siblings().removeClass('selected');
return(false);  
});
</script>

А мое меню выглядит так:

<ul id="nav-one" class="dropmenu css-only">
<li><a href="index.html">Home</a></li>
<li><a href="our_cupcakes.html">Our Cupcakes</a>
<ul>
<li><a href="birthday_cupcakes.html">Birthday Cupcakes</a></li>
<li><a href="new_baby_cupcakes.html">New Baby Cupcakes</a></li>
<li><a href="anniversary_cupcakes.html">Anniversary Cupcakes</a></li>
<li><a href="just_because_cupcakes.html">Just Because Cupcakes</a></li>
<li><a href="seasonal_cupcakes.html">Seasonal Cupcakes</a></li>
<li><a href="special_order_cupcakes.html">Special Order Cupcakes</a></li>
</ul>
</li>
<li><a href="flavours_and_colours.html">Flavours &amp; Colours</a></li>
<li><a href="faqs.html">FAQs</a>
<ul>
<li><a href="faqs.html">General questions</a></li>
<li><a href="faqs.html#ingredients">Ingredients</a></li>
<li><a href="faqs.html#delivery">Delivery &amp; Pick-up</a></li>
<li><a href="faqs.html#about">About us</a></li>
</ul>
</li>
</li>
<li><a href="order_cupcakes.php">Order Cupcakes</a> </li>
</ul>         

Dropmenu.js работает с моим выпадающим меню, и для этого есть отдельный CSS, но я не вижу, чтобы это помешало мне применить класс .selected к элементу навигации с помощью JQuery, но я могу ошибаться.

Кто-нибудь может дать мне несколько советов о том, где я могу ошибаться, пожалуйста? В конечном итоге код появится на сайте домашней выпечки моей жены http://cupcakes.ladybirdbakery.co.uk.

Большое спасибо.

Муравей


person Ant Bird    schedule 07.08.2012    source источник
comment
Вы оборачиваете свой код в $(document).ready(function(){...})?   -  person Abraham    schedule 08.08.2012
comment
Привет, Авраам. Спасибо за ваш ответ. Хотя я забыл это сделать, я сделал это сейчас, но это не решило проблему. Любые другие мысли?   -  person Ant Bird    schedule 09.08.2012
comment
Это правильное поведение: jsfiddle.net/Jewkw/1   -  person Abraham    schedule 09.08.2012
comment
В значительной степени мне не нужно, чтобы дочерние элементы из раскрывающегося меню выделялись при нажатии на основной уровень, поэтому в примере с jsfiddle, когда я нажимаю «Наши кексы», все те, что с отступом под ним, также выделяются в настоящее время. Но, по сути, похоже, что это в значительной степени работает с кодом, который я использовал. Интересно, почему тогда он не работает на моей странице.   -  person Ant Bird    schedule 09.08.2012


Ответы (1)


РЕДАКТИРОВАТЬ 2: я не знал, что вы пытаетесь выделить пункт меню для страницы, на которой находится пользователь. Это совершенно другое дело, и то, что вы делаете сейчас, является неправильным подходом к i, и вот почему: когда пользователь щелкает ссылку, класс selected добавляется к классу <li>. Но затем загружается совершенно новая страница. Изменения, которые JavaScript (и jQuery) вносит в веб-страницу, не сохраняются для будущих страниц. Это означает, что при загрузке новой страницы ни один из <li> не имеет класса selected , пока кто-нибудь не нажмет на одну (но тогда сразу же загрузится другая страница, поэтому они не увидят выделение li).
Что касается того, как это реализовать, я бы рекомендовал просто вручную добавить класс selected к правильному li в каждый HTML-файл. Но если вы действительно хотите использовать JavaScript, вот код:

$(function(){ // this is a shortcut for $(document).ready(function(){
  var filename = location.pathname.substring(location.pathname.lastIndexOf('/')+1)
  $('a[href="' + (filename ? filename : 'index.html') + '"]').parent('li').addClass('selected')
})

Итак, сначала мы создаем переменную filename и присваиваем ей имя файла текущей страницы. Затем мы находим все <a>, чей атрибут href равен имени файла, получаем их родительские элементы <li> и добавляем класс selected. Надеюсь, это поможет. Если у вас есть дополнительные проблемы или вопросы, дайте мне знать. Спасибо!

person Abraham    schedule 09.08.2012
comment
Привет Авраам, еще раз спасибо за ваши предложения. Извините, но он все еще не работает, я загрузил его (только index.html) на cupcakes.ladybirdbakery.co.uk, и теперь он немного ломает навигацию. Я просто еще недостаточно знаю JQuery, чтобы понять это правильно, и я очень надеюсь, что не трачу ваше время впустую. Спасибо. Муравей - person Ant Bird; 10.08.2012
comment
Не волнуйся, ты не тратишь мое время зря. :) Я рад помочь. Новичку может быть трудно начать, и я хочу помочь вам, чем смогу. - person Abraham; 10.08.2012
comment
Доброе утро, да, JQuery — это большой шаг вперед с точки зрения моих знаний в области кодирования, но это будет здорово, как только я получу его за пояс. Я попробовал вышеупомянутые изменения, но это фактически остановило работу навигации по перетаскиванию, я переместил ее в папку бета-версии здесь, чтобы вы могли видеть: cupcakes.ladybirdbakery.co.uk/beta удаление noConflict из dropmenu.js не вызвало никаких проблем, оно добавляло функцию клика в скрипт dropmenu по индексу .html, который, кажется, сделал это. - person Ant Bird; 10.08.2012
comment
Хорошо, проблема в том, что вы добавили CSS для .selected, который портит меню. В частности, height: 19px вызывает проблему. Удаление этой строки CSS должно исправить это. - person Abraham; 10.08.2012
comment
Извините, я думал, что мне нужен CSS для стилизации выбранного состояния, я удалил эту строку, навигация снова работает, но она не выделяет страницу, на которой она все еще находится. Я также пробовал без CSS (на всякий случай), и это не имело значения. - person Ant Bird; 10.08.2012
comment
Теперь на полигоне другая проблема. Вы забыли return false в обработчике событий click. - person Abraham; 10.08.2012
comment
Извините, я думал, что мы удалили это раньше, моя ошибка, я вставил это обратно. Спасибо. Муравей. - person Ant Bird; 11.08.2012
comment
Вам также нужно еще одно закрытие }), чтобы закончить document.ready. Жаль, что я не уловил это раньше. - person Abraham; 11.08.2012
comment
Спасибо Авраам. Теперь мы приближаемся. Если вы нажмете на элементы навигации, они теперь выделяются. Дом не выделяется, когда вы впервые попадаете на страницу, но если вы щелкнете по нему, он применит класс .selected. Единственная проблема заключается в том, что сами навигационные ссылки не ведут на страницу, но, надеюсь, это простое решение. Привет, Муравей - person Ant Bird; 11.08.2012
comment
Ах, вы пытаетесь выделить страницу, на которой находится пользователь? Это совсем другое. См. выше. - person Abraham; 11.08.2012
comment
Извините, да, это то, что я пытался сделать. Я хотел бы использовать Java на случай, если сайт когда-нибудь вырастет, или я создам другой сайт и использую включение для навигации, так как тогда я не смогу применить класс li к каждому элементу. С кодом, который вы предоставили, вопрос новичка, который я знаю, например, для домашней страницы, это просто вопрос добавления $('li:has(a[href=index.html' + location.pathname.slice(1) + '])').addClass ("selected") или мне нужно что-то сделать и с битом location.pathname.slice? - person Ant Bird; 12.08.2012
comment
Должно быть именно так, как я написал в своем ответе выше. Не добавляйте в него 'index.html' или любое другое имя файла — выше я объясню, как это работает. - person Abraham; 12.08.2012
comment
Спасибо, что объяснили это так подробно, это действительно помогает. Я разместил этот код на всех страницах в папке бета-версии в соответствии с кодом, который вы указали выше. Я боюсь, что это все еще не работает, может быть, я сделал что-то не так, когда вставлял его в голову? - person Ant Bird; 12.08.2012
comment
Извините - это была моя ошибка, ошибка в коде. Исправлено и протестировано. - person Abraham; 12.08.2012
comment
Потрясающе, это прекрасно работает, Авраам. Большое вам спасибо за всю вашу помощь и терпение, я очень ценю это, это отличный маленький фрагмент кода. Приятного отдыха. Муравей. - person Ant Bird; 12.08.2012
comment
Рад, что это помогает. Я буду готов помочь вам, если у вас есть еще вопросы. :) - person Abraham; 12.08.2012