How to add class using jQuery

0 votes

I made a small function whose work to do add class in <li> when we clicks on <li>, but I want to remove that if it is already had with <li>.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Tue, 22 May 2012 12:39:23 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>

    <style type="text/css">
    <!--
    body {
      color:#000000;
      background-color:#FFFFFF;
    }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    -->
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

    $(function(){

    $('.main').find('li').each(function(){

    $(this).live('click', function (){

    $(this).addClass('active')

    })

    })

    })

    </script>

  </head>
  <body>

  <ul class="main">
  <li>first</li>

  <li>second</li>
    <li>third</li>
      <li>fourth</li>  

  </ul>

  </body>
</html>

May 31, 2022 in JQuery by Edureka
 • 13,690 points • 3,191 views

1 answer to this question.

0 votes

Add a class name to the first <p> element:

$("button").click(function(){
  $("p:first").addClass("intro");
});
answered Jun 1, 2022 by Edureka
 • 13,690 points

Related Questions In JQuery

0 votes
1 answer

How do I add options to a DropDownList using jQuery?

Without using any extra plugins, var myOptions = ...READ MORE

answered Jun 21, 2022 in JQuery by rajatha
 • 7,680 points • 503 views
0 votes
1 answer

How to import jQuery UI using ES6/ES7 syntax?

Hii, Add a alias in webpack config: resolve: { ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
 • 82,840 points • 7,967 views
0 votes
1 answer

How to scroll to element from bottom to top with a nice animation using Jquery?

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
 • 82,840 points • 4,251 views
0 votes
1 answer

How to find a parent with a known class in jQuery?

Hello @kartik, Assuming that this is .d, you can write $(this).closest('.a'); The closest method returns the ...READ MORE

answered Oct 5, 2020 in JQuery by Niroj
 • 82,840 points • 7,257 views
0 votes
1 answer

How to disable HTML links using jquery?

Hello @kartik, Got the fix in css. td.disabledAnchor a{ ...READ MORE

answered Nov 26, 2020 in JQuery by Niroj
 • 82,840 points • 2,444 views
0 votes
0 answers

How to replace innerHTML of a div using jQuery?

How could I achieve the following: document.all.regTitle.innerHTML = ...READ MORE

May 31, 2022 in JQuery by Edureka
 • 13,690 points • 1,779 views
0 votes
1 answer

How to trigger a click on a link using jQuery

If you are trying to trigger an ...READ MORE

answered Jun 3, 2022 in JQuery by Edureka
 • 13,690 points • 16,418 views
0 votes
1 answer

How to implement a dynamic bootstrap 4 accordion, using Jquery

With this you can add dynamic accordion ...READ MORE

answered Jun 7, 2022 in JQuery by Edureka
 • 13,690 points • 3,933 views
0 votes
1 answer

How to change color of SVG image using CSS (jQuery SVG image replacement)?

Edit your SVG file, add fill="currentColor" to ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
 • 13,690 points • 22,152 views
0 votes
1 answer

How to make a simple modal pop up form using jquery and html?

Create A Modal <button onclick="document.getElementById('id01').style.display='block'" class="w3-button">Open Modal</button> ... <div ...READ MORE

answered Jun 2, 2022 in JQuery by Edureka
 • 13,690 points • 7,574 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP
"PMP®","PMI®", "PMI-ACP®" and "PMBOK®" are registered marks of the Project Management Institute, Inc. MongoDB®, Mongo and the leaf logo are the registered trademarks of MongoDB, Inc.