In this tutorial, we will see how to add a class on click of anchor tag using jQuery on click method. Here, we use the addClass() method. It is used to add more property on each selected element and also change the property of the selected element. In the below example, we are creating an anchor element with a button, when the user clicks on the button, the addClass() method adds a class named “active-class”.
Example:
<!DOCTYPE html>
<html>
<head>
<title>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-class {
font-size: 30px;
color: #89CFF0;
font-weight: bold;
text-decoration: none;
}
</style>
</head>
<body>
<div style="text-align: center;">
<h1 style="color: #89CFF0">Add Class</h1>
<h3>Add a class on click of anchor tag using jQuery?</h3>
<input type="button" id="btn" value="Add Class" style="padding: 15px 30px;"><br><br>
<a class="" href="https://codeamend.com/">Jquery add class</a>
</div>
</body>
<script>
$(document).ready(function() {
$("#btn").on('click', function() {
$("a").addClass("active-class");
});
});
</script>
</html>