[jQuery] Re: Deactivating parent link with JQuery

oh I see, this would be better done with some server side code but this
is how you could do that.

Similar code, just checking for a class.

$("li a.nav-selected").each(function(){

$(this).parents("ul").parents("li").children("a").addClass("nav-selected");
});

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