Hi Liam, Thanks, I think I didn't make myself clear enough - rather than occurring when you click the link, I need the class to stay in place whenever a child link (i.e. Link 3a, 3b or 3c) is active. I can see the class is being applied on click, but how would I make the class stay in place? Like this didn't work:
$("li a").ready(function(){ $(this).parents("ul").parents("li").addClass("nav-selected"); }); Thanks, osu On Sep 29, 11:35 am, Liam Potter <radioactiv...@gmail.com> wrote: > It all works fine, except for this bit > $("li ul").siblings("a").click(function(){ > return false; > }); > there are no a tag siblings of the UL, so that will not work. > > I've just tested it, and when I click on a subnav link, the class is > added to the LI containing Link 3, if you need it to be added to the a > tag use this > > $("li a").click(function(){ > > $(this).parents("ul").parents("li").children("a").addClass("nav-selected"); > > }); > osu wrote: > > Hi Liam, > > > This is the list I'm working with: > > > <ul> > > <li class="nav-path-selected"><a href="#">Link 1</a></li> > > <li><a href="#">Link 2</a></li> > > <li class="nav-path-selected"><a href="#">Link 3</a> > > <ul> > > <li><a href="#" class="nav-selected">Link 3a</a></li> > > <li><a href="#">Link 3b</a></li> > > <li><a href="#">Link 3c</a></li> > > </ul> > > </li> > > <li><a href="#">Link 4</a></li> > > </ul> > > > I need to add the class 'nav-selected' to Link 3 so I can highlight it > > using the same CSS as used to style Link 3a (the active link in the > > example above). As you can see, Link 1 has a class of 'nav-path- > > selected', so I need to differentiate between that and Link 3 (hence > > why I want to add a 'nav-selected' class to Link 3) > > > The JQuery I've added to the footer of my page is: > > > <script type="text/javascript"> > > //<![CDATA[ > > > $(document).ready(function() { > > // Disabledparentlink > > $("li ul").siblings("a").click(function(){ > > return false; > > }); > > $("li a").click(function(){ > > > > $(this).parents("ul").parents("li").addClass("nav-selected"); > > }); > > }); > > > //]]> > > </script> > > > But nothing is happening...no JS errors in Firebug either - any ideas? > > > Thanks for your patience, > > > osu > > > On Sep 29, 11:07 am, Liam Potter <radioactiv...@gmail.com> wrote: > > >> I'm assuming you posted an example list and the real list does contain a > >> tags? I'm also assuming you are running that script with a document > >> ready handler? > > >> osu wrote: > > >>> Thanks Liam, but that's not working... > > >>> Not sure why .click is in your example? Am I right in thinking by > >>> adding .parents to the end of each tag in your example that you're > >>> 'going down' different levels in the unordered list? > > >>> This is what I have: > > >>> $("li a").click(function(){ > >>> $(this).parents("ul").parents("li").addClass("nav-selected"); > >>> }); > > >>> Any ideas what's going wrong? > > >>> On Sep 29, 10:29 am, Liam Potter <radioactiv...@gmail.com> wrote: > > >>>> $("li a").click(function(){ > >>>> $(this).parents("ul").parents("li").addClass("className"); > > >>>> }); > >>>> osu wrote: > > >>>>> Hi Ryan, > > >>>>> That only affects the child of theparent. > > >>>>> What I want to do is this: > > >>>>> <ul> > >>>>> <li>Link 1</li> > >>>>> <li>Link 2 *This is the link I want to add a class to* > >>>>> <ul> > >>>>> <li>Link 2a</li> > >>>>> <li>Link 2b</li> *This is the active link* > >>>>> <li>Link 2c</li> > >>>>> </ul> > >>>>> </li> > >>>>> <li>Link 3</li> > >>>>> </ul> > > >>>>> Rather than affecting a descendent/child of theparentlink, I need to > >>>>> work on the *parentlink* under which the active link is found. > > >>>>> Any ideas? > > >>>>> Thanks, > > >>>>> osu > > >>>>> On Sep 26, 7:48 pm, "ryan.j" <ryan.joyce...@googlemail.com> wrote: > > >>>>>> $('.nav-selected:first') > > >>>>>> On Sep 26, 5:36 pm, osu <onesiz...@googlemail.com> wrote: > > >>>>>>> Can anyone help with this one please? > > >>>>>>> Thanks, > > >>>>>>> osu > > >>>>>>> On Sep 25, 2:03 pm, osu <onesiz...@googlemail.com> wrote: > > >>>>>>>> Thanks Ryan for the alternative, > > >>>>>>>> However, I need to do the following now (see message above your last > >>>>>>>> post): > > >>>>>>>> I need to highlight *only* the top-parentitem (the same one I just > >>>>>>>> ran 'return false;' on) with the class 'nav-selected'. > > >>>>>>>> Any idea how I could do that? > > >>>>>>>> Thanks, > > >>>>>>>> osu > > >>>>>>>> On Sep 25, 11:13 am, "ryan.j" <ryan.joyce...@googlemail.com> wrote: > > >>>>>>>>> rather than removing the href you could use the preventDefault > >>>>>>>>> function, which will leave the href intact should you want to unbind > >>>>>>>>> it at a later date. > > >>>>>>>>> usage is something like.. > > >>>>>>>>> $('a.submit-button').click(function(e){ > >>>>>>>>> e.preventDefault(); > >>>>>>>>> doSubmit( $(this).html() ); > > >>>>>>>>> }) > > >>>>>>>>> On Sep 24, 5:32 pm, osu <onesiz...@googlemail.com> wrote: > > >>>>>>>>>> Thanks Andi, > > >>>>>>>>>> Yes, I meant an unordered list as you showed. > > >>>>>>>>>> Rather than remove the <a> tag, is it possible to just 'deactivate' > >>>>>>>>>> it? i.e. when you click it, nothing happens, but the <a> tag stays > >>>>>>>>>> in > >>>>>>>>>> place? > > >>>>>>>>>> I ask, because I'd like to keep the CSS as simple as possible. > > >>>>>>>>>> Thanks, > > >>>>>>>>>> osu > > >>>>>>>>>> On Sep 24, 6:05 pm, Andi23 <dowhatyouw...@gmail.com> wrote: > > >>>>>>>>>>> First of all, let's clarify the actual HTML. I assume this is > >>>>>>>>>>> what > >>>>>>>>>>> you have: > >>>>>>>>>>> <ul> > >>>>>>>>>>> <li><a href="#">Link 1</a></li> > >>>>>>>>>>> <li><a href="#">Link 2</a></li> > >>>>>>>>>>> <li><a href="#">Link 3</a> > >>>>>>>>>>> <ul> > >>>>>>>>>>> <li><a href="#">Link 3a</a></li> > >>>>>>>>>>> <li><a href="#">Link 3b</a></li> > >>>>>>>>>>> <li><a href="#">Link 3c</a></li> > >>>>>>>>>>> </ul> > >>>>>>>>>>> </li> > >>>>>>>>>>> <li><a href="#">Link 4</a></li> > >>>>>>>>>>> </ul> > > >>>>>>>>>>> When you say "remove the link", I assume you want to turn this: > >>>>>>>>>>> <li><a href="#">Link 3</a> > >>>>>>>>>>> into this: > >>>>>>>>>>> <li>Link 3 > > >>>>>>>>>>> Given that, try this jQuery: > >>>>>>>>>>> $("li ul").siblings("a").each(function(){ > >>>>>>>>>>> $(this).replaceWith($(this).html()); > > >>>>>>>>>>> });