i want to add a class to the li when the tag is clicked i am using jQuery addclass but not sure how to get it to the LI

<ul class="nav">
 <li class=""> <!---------add class to here---->
   <a href="default.asp">Home</a> <!-------- when this is clicked---->
   <ul>
       <li><a href="news.asp">link 1</a></li><!-------- but NOT when this is clicked----->
       <li><a href="news.asp">link 2</a></li>
       <li><a href="news.asp">link 3</a></li>
   <ul>
 </li>
 <li><a href="news.asp">News</a></li>
 <li><a href="contact.asp">Contact</a></li>
 <li><a href="about.asp">About</a></li>
</ul>

I hope this makes sense

Thanks in advance

i want to add a class to the li when the tag is clicked i am using jQuery addclass but not sure how to get it to the LI

<ul class="nav">
 <li class=""> <!---------add class to here---->
   <a href="default.asp">Home</a> <!-------- when this is clicked---->
   <ul>
       <li><a href="news.asp">link 1</a></li><!-------- but NOT when this is clicked----->
       <li><a href="news.asp">link 2</a></li>
       <li><a href="news.asp">link 3</a></li>
   <ul>
 </li>
 <li><a href="news.asp">News</a></li>
 <li><a href="contact.asp">Contact</a></li>
 <li><a href="about.asp">About</a></li>
</ul>

I hope this makes sense

Thanks in advance

• javascript
• jquery
• html
• css

• Ninja answers. In plement, here is the doc about this parent() selector. api.jquery./parent – Alexis B. Commented Jul 29, 2015 at 14:28
• Did you want the nested links to add the class to their immediate LI too? That changes the answer. – iCollect.it Ltd Commented Jul 29, 2015 at 14:30
• 2 HTML error, the last <ul> should be </ul> for the inner list. – Stickers Commented Jul 29, 2015 at 14:30
• Added version for you that turns off the matching classes as requested in ment, but everyone is too busy on the early answers to notice :) – iCollect.it Ltd Commented Jul 29, 2015 at 14:41
• 1 top work:-) thank you so much :-) – Daniel Edwards Commented Jul 29, 2015 at 14:42

3 Answers 3

You can achieve by adding following click function

$("ul.nav > li > a").click(function(){
     $(this).parent().addClass("your_class");
});

For efficiency, you should use a single delegated event handler attached to your .nav element:

If you want all the sibling element to remove that class use not.

e.g.

    $('.nav').on('click', 'li > a', function(){
          var $li = $(this).parent();
          $li.siblings().not($li.addClass('smclass')).removeClass('smclass');
    });

Note: Answers with .nav > li (emphasis on >) will only work for the top level links. You need to clarify if you want the same behaviour on all links (which this example currently does).

If you only wanted it to work on the top-level links it would be

    $('.nav').on('click', '> li > a', function(){
          var $li = $(this).parent();
          $li.siblings().not($li.addClass('smclass')).removeClass('smclass');
    });

You can use immediate child selector to target all direct child elements:

$('.nav > li > a').click(function(){
  $(this).parent().addClass('smclass')
});