Add Active Class Onclick Javascript And JQuery

Home » Add Class To Element On Click Javascript » Add Active Class Onclick Javascript And JQuery

Maybe your like

Add active class to a div on javascript onclick event

Here we are applying a style to a simple div.

Steps to add a css class on click event

  1. Create a div with specific id (here id=”text”)
  2. on click on div call a method makeActive()
  3. Define a function makeActive() in side <script> tag.
  4. Inside makeActive() getElementById
  5. Get Elements classList and add class active.
  6. Use the innerHTML to change to element Text
<!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="makeActive()"> Click to make Active </div> <script> function makeActive() { var element = document.getElementById("text"); element.classList.add("active"); element.innerHTML="This is Active"; } </script> </body> </html>
12345678910111213141516171819202122232425 <!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="makeActive()">ClicktomakeActive</div><script>functionmakeActive(){varelement=document.getElementById("text");element.classList.add("active");element.innerHTML="This is Active";}</script></body></html>
Try It

Add active class onclick javascript to HTML ul List to make menu

Here We have ul list elements to create horizontal menu on click on any element an active class is applied on it and if any one have already active class then remove it.

  1. create a ul menu with li items
  2. make menu display inline using css
  3. inside script tag select all anchor in menu class
  4. on click event find is there any active class in li
  5. if found then remove it
  6. add active class to clicked element.
<!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="#">Home</a> </li> <li><a href="#">About Us</a> </li> <li><a href="#">Contact Us</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>
123456789101112131415161718192021222324252627282930313233343536373839 <!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"><ahref="#">Home</a></li><li><ahref="#">About Us</a></li><li><ahref="#">Contact Us</a></li><li><ahref="#">FAQ</a></li></ul><script>vara=document.querySelectorAll(".menu a");for(vari=0,length=a.length;i<length;i++){a[i].onclick=function(){varb=document.querySelector(".menu li.active");if(b)b.classList.remove("active");this.parentNode.classList.add('active');};}</script></body></html>
Try It

Reference

Add active class to a div on Jquery onclick event

Here we have taken example of only a single div on click on div it will add an active class on div.

you can download or include Jquery from CDN

To achieve this follow these steps

  1. Define active css class
  2. Include Latest Jquery jquery.min.js file to your html
  3. Create a div with id text.
  4. Write Jquery code inside script tag.
  5. Check for document ready state if ready then
  6. write click function for #text
  7. add a class using jquery addClass()
  8. Change the div content using Jquery text().
<!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>
123456789101112131415161718192021222324252627 <!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">ClicktomakeActive</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>
Try It

Add active class onclick JQuery to HTML ul List to make menu

As we already seen how to add a active class in HTML List.

The same work we will do with JQuery.

JQuery provides easy way to add and remove css class in any element

  1. Create a simple HTML unordered list
  2. Style list to make inline and provide margin
  3. define a active style in css
  4. Include Jquery latest jquery.min.js file
  5. Write Jquery event that will work on document ready
  6. On click on anchor tag inside li first remove all active class from li then add active class in parent li of anchor tag.
<!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="#">Home</a> </li> <li><a href="#">About Us</a> </li> <li><a href="#">Contact Us</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"); }); }); </script> </body> </html>
123456789101112131415161718192021222324252627282930313233343536373839 <!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"><ahref="#">Home</a></li><li><ahref="#">About Us</a></li><li><ahref="#">Contact Us</a></li><li><ahref="#">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");});});</script></body></html>

Jquery provides addClass() and removeClass() to add and remove any css class.

You can learn how to access parent class id in JQuery

Add Hover effect in HTML menu using JQuery hover()

<!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="#">Home</a> </li> <li><a href="#">About Us</a> </li> <li><a href="#">Contact Us</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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 <!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"><ahref="#">Home</a></li><li><ahref="#">About Us</a></li><li><ahref="#">Contact Us</a></li><li><ahref="#">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>

To add hover effect we used below code.

This will add and remove css class on hover.

$( "a" ).hover(function() { $(this).parent("li").addClass("hover"); }, function() { $(".menu li").removeClass("hover"); });
12345 $("a").hover(function(){$(this).parent("li").addClass("hover");},function(){$(".menu li").removeClass("hover");});

Read More

  1. Get multiple checkbox value in javascript
  2. JavaScript Multiplication Table
  3. isPrime() Javascript : Prime number program
  4. Form Handling and Validation
  5. Try Catch and Finally in JavaScript
  6. Math Object in JavaScript

Tag » Add Class To Element On Click Javascript