En este artículo, veremos cómo agregar una clase al hacer clic en la etiqueta de anclaje usando jQuery. Para agregar una clase al hacer clic en la etiqueta de anclaje, usamos el método addClass() . El método addClass() se usa para agregar más propiedades a cada elemento seleccionado. También se puede utilizar para cambiar la propiedad del elemento seleccionado.
Sintaxis:
$(selector).addClass("active");
En el siguiente ejemplo, estamos creando un elemento de clase ancla y un botón, cuando el usuario hace clic en el botón, se llama al método addClass() y este método agrega una clase llamada «activa».
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title> How to add a class on click of anchor tag using jQuery? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </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>
Producción: