jQuery addClass with HTML table, button, links and list demos
Purpose of addClass method
The jQuery addClass method is used to add class(es) to specified HTML elements. You may add one or more classes in a single call.
If matched elements are more than one, the addClass method will add the given class(es) to all matched elements.
For example, if you specified “div” as sector and your web page contains one or more divs, the jQuery addClass will add given classes to all div elements.
Syntax of addClass jQuery
This is how you can use the addClass method:
To add more than one classes, separate class names by space:
I will show you jQuery $.addClass demos with HTML div, table, link, button and list elements in the following section.
An example of using addClass with a div element
In the demo, a div is created without any class initially. As you click the button “Add Class to div”, it will add a CSS class created in the <style> section of <head> tag to that div. See the demo online:
See online demo and code
The following code is used in the click event of button to add a class:
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $("#btnaddcls").click(function(){ $("#divcls").addClass("addcls"); }); }); |
A demo of addClass with a div having a class already
Generally, the addClass method is used with the removeClass method. For that, first remove the used class by using removeClass method which is followed by addClass jQuery method. See this demo online:
See online demo and code
This time, the following code is used in the <script> section:
|
1 2 3 4 5 |
$("#btnaddcls").click(function(){ $(".divcls").removeClass( "divcls" ).addClass( "addcls" ); }); |
You see, first I removed the divcls CSS class that was applied initially. After that, I used addClass method to add the addcls class to that div.
A demo of addClass with HTML table
In this demo, an HTML table is created with a default class. A dropdown is also given where you may choose a different theme or class for that table.
As you select a theme from the dropdown, the new theme will be applied to that table by using jQuery addClass method. First, have a look at that demo:
See online demo and code
You can see the code in the demo page which is lengthy. As my focus is to explain the addClass method, so let me dig into this only.
The HTML table was created with an id=tbl and the demotbl class which is defined in the <style> section. The <style> section has two other classes for that table.
In the dropdown, the values are set to the class names that I created in the <style> section.
As you select an option, the select change event happens, which is used in the <script> section just above the </body> tag. The selected value is assigned to a variable:
|
1 |
var themetbl = document.getElementById("selecttheme").value; |
The next line of code removes the existing class by using removeClass method and adds the new class by using addClass method:
|
1 |
$("#tbl").removeClass( ).addClass( themetbl ); |
That’s it!
Similarly, you can use the addClass method to add the class(es) in HTML buttons. In this example, as you click the button, a class of CSS will be added to that button that contains properties to change the background, border, font-size, font-family etc. of that button.
See the demo online:
See online demo and code
A demo with HTML lists
In this example, I have created a list with a few menu items. Three links are given under the menu to change the theme. Upon clicking each link, the click event of that link occurs where I used the addClass method with removeClass to add the new class.
See online demo and code
Basically, the <li> and <a> tags of menu are contained in the <div> element which CSS class is changed at the click event of respective link by using this code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$("#addclass").click(function(){ $("#mainmenu").removeClass().addClass("men_ex"); }); $("#addclass2").click(function(){ $("#mainmenu").removeClass().addClass("men_ex2"); }); $("#addclass3").click(function(){ $("#mainmenu").removeClass().addClass("men_ex3"); }); |
Also see: jQuery removeClass