Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add a class on click of anchor tag using jQuery ?

  • Last Updated : 30 Sep, 2021

In this article, we will see how to add a class on click of anchor tag using jQuery. To add a class on click of anchor tag, we use addClass() method. The addClass() method is used to add more property to each selected element. It can also be used to change the property of the selected element.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

$(selector).addClass("active");

In the below example, we are creating an anchor class element and a button, when the user clicks on the button, the addClass() method is called and this method adds a class named “active”. 

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to add a class on click 
        of anchor tag using jQuery?
    </title>
  
    <script src=
    </script>
  
    <style>
        .active {
            font-size: 32px;
            color: green;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
  
    <script>
        $(document).ready(function() {
            $("#btn").on('click', function() {
                $("a").addClass("active");
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>
            How to add a class on click 
            of anchor tag using jQuery?
        </h3>
  
        <input type="button" id="btn" 
            value="Add Class" 
            style="padding: 5px 10px;">
        <br><br>
  
        <a class="" href=
            "https://www.geeksforgeeks.org/">
            GeeksforGeeks
        </a>
    </center>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :