In this tutorial, we’ll see how you can easily add and remove CSS classes with jQuery.
Video highlights
[0:47] The setup (grab lorem ipsum from here)
[1:24] The directory structure we’re using
[2:00] Going through our starting source code
[3:47] What comes first, .css files or .js files? (detailed explanation here)
[4:19] Writing our CSS code (simple p.highlight class)
[5:30] On click, add the highlight class to every paragraph on the page
[6:15] Highlighting only the second paragraph on the page (with some trial and error)
[7:48] Adding multiple classes with one click
[8:36] Using jQuery’s .css method to achieve the same effect
[10:58] On click, remove the highlight class
[11:49] On click, toggle the highlight class
[12:33] Simple examples, lots of potential
Source code
Here’s the final source code we end up with in the video, with the link adding and removing the highlight class from the second paragraph:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery Test</title>
<script type="text/javascript" src="javascripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
$("p:eq(1)").toggleClass("highlight");
event.preventDefault();
});
});
</script>
<style type="text/css">
p.highlight { background: #ffff99 }
</style>
</head>
<body>
<p><a href="#">Do something funky</a></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac magna purus, a aliquam erat.
Duis libero neque, fringilla quis scelerisque in, auctor nec tortor. Mauris blandit blandit
enim et lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Vivamus id tellus eu quam scelerisque iaculis. Fusce luctus tellus orci,
sed iaculis nibh.
</p>
<p>
Maecenas luctus velit sit amet magna vehicula convallis. Curabitur tellus turpis, condimentum
ac pellentesque vel, lacinia in odio. Sed cursus hendrerit eros, vitae semper dui fermentum a.
Sed a neque sit amet tellus laoreet auctor non et nulla. Etiam neque erat, facilisis at
dignissim et, faucibus ac libero. Suspendisse eget risus erat, bibendum pharetra elit.
</p>
</body>
</html>
And here’s the jQuery snippet we used to create the same on-click effect without the use of CSS:
$("a").click(function(event){
$("p:eq(1)").css({background:"#ffff99", fontWeight:"bold"});
event.preventDefault();
});
All good? Let me know in the comments if you have any questions.
