JQuery Navigation Highlight с 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="/bgindex.html">Home</a></li>
<li><a href="/bgour_cupcakes.html">Our Cupcakes</a>
<ul>
<li><a href="/bgbirthday_cupcakes.html">Birthday Cupcakes</a></li>
<li><a href="/bgnew_baby_cupcakes.html">New Baby Cupcakes</a></li>
<li><a href="/bganniversary_cupcakes.html">Anniversary Cupcakes</a></li>
<li><a href="/bgjust_because_cupcakes.html">Just Because Cupcakes</a></li>
<li><a href="/bgseasonal_cupcakes.html">Seasonal Cupcakes</a></li>
<li><a href="/bgspecial_order_cupcakes.html">Special Order Cupcakes</a></li>
</ul>
</li>
<li><a href="/bgflavours_and_colours.html">Flavours &amp; Colours</a></li>
<li><a href="/bgfaqs.html">FAQs</a>
<ul>
<li><a href="/bgfaqs.html">General questions</a></li>
<li><a href="/bgfaqs.html#ingredients">Ingredients</a></li>
<li><a href="/bgfaqs.html#delivery">Delivery &amp; Pick-up</a></li>
<li><a href="/bgfaqs.html#about">About us</a></li>
</ul>
</li>
</li>
<li><a href="/bgorder_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>s няма 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="/bg' + (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