How to add and remove a class to an anchor tag with jQuery?

jQuery Web Development Front End Technology

To add and remove a class to an anchor tag, use the toggleClass. Using it you can add and remove a class on a click.

You can try to run the following code to learn how to add and remove a class to an anchor tag with jQuery −

Example

<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
        $(document).ready(function(){
         $("#mylink").click(function (e) {
            e.preventDefault();        
            $(this).toggleClass("selected");  
         });
        });
      </script>

      <style>
        .selected {
           color: red;
        }
      </style>

   </head>
   <body>
      <a href="#" id="mylink">Click me</a>
      <p>The above will add and remove class (change color) on click.</p>
   </body>
</html>

Ricky Barnes

Updated on: 13-Feb-2020

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started