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());
>
> >>>>>>>>>>> });
