Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add and remove a class to an anchor tag with jQuery?
To add and remove a class to an anchor tag, use the toggleClass() method. Using it you can add and remove a class on a click event.
The toggleClass() method checks if the specified class exists on the element. If it exists, it removes the class; if it doesn't exist, it adds the class. This makes it perfect for creating interactive elements that change appearance when clicked.
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;
font-weight: bold;
}
</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>
In this example:
-
$(document).ready()ensures the jQuery code runs after the page loads -
$("#mylink")selects the anchor tag with id "mylink" -
e.preventDefault()prevents the default link behavior -
$(this).toggleClass("selected")adds or removes the "selected" class
When you click the link, it will toggle between normal text and red bold text, demonstrating how the class is being added and removed dynamically.
Conclusion
The toggleClass() method provides an efficient way to add and remove classes from anchor tags in jQuery. This technique is commonly used for creating interactive navigation menus, buttons, and other clickable elements that need visual feedback.
2K+ Views
