Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 30 Sep, 2021
Improve Article
Save Article

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:

$(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
Related Articles

Start Your Coding Journey Now!