Adding and Removing CSS Classes with the jQuery JavaScript Library
Welcome to the sixth article in a series that introduces the jQuery JavaScript library. Composed of eight approachable tutorials, this series steps you through using the most relevant methods included with the jQuery framework, complementing theory with numerous, illustrative hands-on examples.
Adding and Removing CSS Classes with the jQuery JavaScript Library - Adding and removing CSS classes on the fly (Page 2 of 4 )
As I mentioned in the beginning, “jQuery” comes equipped with a couple of methods for dynamically manipulating the CSS classes of a targeted element of a web page. The first one of these is simply called “addClass().” It attaches a CSS class to a selected element.
The prototype for using this method can be seen in the following code sample, so have a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As shown above, the “addClass()” method can be really helpful for assigning a specific CSS class to a given web page element. In the previous example, a “largetext” class is dynamically tied to a link, after the whole web document has been loaded. Pretty simple to grasp, isn’t it?
On the other hand, jQuery provides another method, called “removeClass(),” that performs exactly the opposite operation -- it unties a CSS class from a selected web page element. The way that this method works will be better understood if you examine the following code sample. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
That wasn’t rocket science! As you can see, the “removeClass()” method has been used to remove a “smalltext” CSS class from a sample link, after the entire web document has finished loading.
So far, so good. At this point, assuming that you've already grasped how the “addClass()” and “removeClass()” methods do their business, it’s time to more deeply explore the actual functionality of these methods, since they allow us to work with more complex CSS selectors in a simple fashion.
Therefore, in the following section, I’m going to show you how to use this useful characteristic to dynamically add a CSS class to a selected element within a web page.
To learn the complete details for how this process will be achieved, please click on the link that appears below and keep reading.
JavaScript 
/ 3 
More Top jQuery Plugins for Menus
