add active class to li onclick jquery Question: – How can add class “Active” on click of an li element and remove it from others at the same time?
add active class to li onclick jquery
Query : How to add class (active) on specific li on user click with jQuery? – Loop through the buttons and add the active class to the current/clicked button.
$("#menu li a").click(function() {
$(this).parent().addClass('selected').siblings().removeClass('selected');
});
Add active class to a div on javascript onclick event
index.html
create a ul menu with li items
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.active {
padding: 5px;
background-color: #20BF55;
color: white;
}
</style>
</head>
<body>
<div id="text" onclick="currentActive()">
Click to make Active
</div>
<script>
function currentActive() {
var user_dtl = document.getElementById("text");
user_dtl.classList.add("active");
user_dtl.innerHTML="Good Luck Is Active";
}
</script>
</body>
</html>
Add active class onclick javascript to HTML ul List to make menu
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.menu li{
display:inline;
margin: 15px;
}
.active {
background-color: #20BF55;
padding:5px;
}
</style>
</head>
<body>
<ul class="menu">
<li class="active"><a href="#">Blog</a>
</li>
<li><a href="#">Guest Post</a>
</li>
<li><a href="#">New Product</a>
</li>
<li><a href="#">FAQ</a>
</li>
</ul>
<script>
var a = document.querySelectorAll(".menu a");
for (var i = 0, length = a.length; i < length; i++) {
a[i].onclick = function() {
var b = document.querySelector(".menu li.active");
if (b) b.classList.remove("active");
this.parentNode.classList.add('active');
};
}
</script>
</body>
</html>
Add active class to a div on Jquery onclick event
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.active {
padding: 5px;
background-color: #20BF55;
color: white;
}
</style>
</head>
<body>
<div id="text">
Click to make Active
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#text").click(function(){
$(this).addClass("active");
$(this).text("Active Class");
});
});
</script>
</body>
</html>
Add Hover effect in HTML menu using JQuery hover()
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.menu li{
display:inline;
margin: 15px;
}
.active {
background-color: #20BF55;
padding:5px;
}
.hover {
background-color: #89de6f;
padding:5px;
}
</style>
</head>
<body>
<ul class="menu">
<li class="active"><a href="#">Blog</a>
</li>
<li><a href="#">Guest Post</a>
</li>
<li><a href="#">New Product</a>
</li>
<li><a href="#">FAQ</a>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(){
$(".menu li").removeClass("active");
$(this).parent("li").addClass("active");
});
$( "a" ).hover(function() {
$(this).parent("li").addClass("hover");
}, function() {
$(".menu li").removeClass("hover");
});
});
</script>
</body>
</html>
$( "a" ).hover(function() {
$(this).parent("li").addClass("hover");
}, function() {
$(".menu li").removeClass("hover");
});
Don’t Miss : Add and remove active class onclick jquery
I hope you get an idea about add active class to li onclick jquery.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.