Saturday 15 June 2013

navigation - jQuery - Active Link and Parent Relationship -


I am working on a navigation for a site and some guidance on adding a class dynamically on the active link the wanted. Apart from this, once that link is established and I have to refer back to the parents and have to "show" it.

This is what I am working with. Navigation is of Mandarin style but does not use the Acodion UI

& lt; Ul id = "menu3" & gt; & Lt; Li & gt; & Lt; A href = "{site_url}" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "drop" href = "#" & gt; Notification & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "{site_url} info / audio" & gt; Audio & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} notification / video" & gt; Video & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} information / presentations" & gt; Presentations & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; One class = "drop" href = "#" & gt; Clinic & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "{site_url} clinic / a" & gt; Office 1 & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} clinic / two" & gt; Office 2 & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} form /" & gt; Form & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "{site_url} Success Story / Index" & gt; Success Stories & lt; / A & gt; & Lt; / Li & gt;

  $ (function () {$ ('Ul # Menu ('ul'). (); $ ('Ul # menu3 & gt; li & gt; a.drop'). Click (function () {$ (this) .Parent (.) Children ('UL'). Toggle ("slow"); return false;});  

So far it is so good. Everything works.

Now I highlight dynamic active links I would like to try and use it:

  var path = location.pathname.substring (1); if (path) $ ('ul # menu3 a [href $ = "' + Path + '"]') .attr ('class', 'selected');  

but not enough to add this right square

The last thing I need to do is to open the navigation for the active group. For example, if audio is the current page, the info section of the Navigation Arounderr will show Active link.

I appreciate some help on this. Thanks.

< P> The following works fine for me Also additionally adding your "selected" code works as expected Comments inline provided Mr. went If open question ... Comment / Ask.

  $ (function () {var pathname = location. Patna name; var highlights; // Highlight home if (pathname == "/") highlight = $ ('ul # menu3 & gt; ; Li: first & gt; a: first '); else {var path = pathname.substring (1); if (path) highlight = $ (' ul # menu3 a [href = '' '+ path +' "] ');} Highlight retro (' class', 'selected'); // second, third, ... hide level menu $ ('ul # menu3 ul'); // Click the child click on the menu Click $ ('ul # menu3> gt; li & gt; a.drop') {// minor correction $ (this) .siblings ('ul') toggle ("slow"); Returning False;}); // Open to the Value Group (Highlighted Link), Show all parents' $ UL ('a.selected') Parents ("ul"). Show (); // If you only have a 2 Level is a deep navigation, which you can use // // instead of // $ ('a.selected'). (Parent ("ul"). Eq (0) Show ();});  

No comments:

Post a Comment