$("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() {
> // Disabled parent link
> $("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());
>>>>>>>>>>>
>>>>>>>>>>> });
>>>>>>>>>>>
No comments:
Post a Comment