Video tutorial illustrates the use of jQuery methods to add and remove CSS class to HTML elements on the fly or dynamically.
Let’s assume that we have a client and her requirements:
She has a menu with both vegetarian and non-vegetarian items in it.
Once her customer clicks on a button called Vegetarian, all the vegetarian items must get highlighted in the menu.
Once the customer clicks on Restore button, all the highlighting must disappear and the menu must look as before.
HTML code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html>
<head><title>jQuery Methods and CSS!</title>
<style type="text/css">
.highlight{
background-color: lightgreen;
width: 100px;
}
</style>
</head>
<body>
<ol>
<li class="veg">Rice</li>
<li class="non_veg">Chicken</li>
<li class="veg">Veg Pizza</li>
<li class="non_veg">Fish</li>
<li class="veg">Fruits and Juice!</li>
</ol>
<br />
<button id="select_veg">Vegitarian</button>
<button id="restore_menu">Restore</button>
<script type="text/javascript" src="script/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="script/my_script.js"></script>
</body>
</html> |
Here we have an ordered list with some list items in it.
The vegetarian items have a class name of veg.
and non-vegetarian items have a class name of non_veg.
Two buttons with its respective ID’s.
Some CSS coding:
It has 1 class which has a background color of light green and a width of 100px.
This class must be dynamically applied to the list items with class name veg, upon clicking of the button Vegetarian.
jQuery code
my_script.js
1 2 3 4 5 6 7 8 9 10 11 | $(document).ready( function() {
$("#select_veg").click( function() {
$("li.veg").addClass("highlight");
});
$("#restore_menu").click( function() {
$("li.veg").removeClass("highlight");
});
}); |
Once the document is loaded and ready we call an anonymous function.
When the user clicks on the button with an id of select_veg, we select all the list items with the class veg and add the CSS class highlight to it, using addClass method of jQuery. Which brings light green background color to those list items.
When the user clicks on Restore button which has an id of restore_menu, we remove the CSS class highlight from all the list items using removeClass method of jQuery.
Video Tutorial: jQuery Methods and CSS: Restaurant Application
[youtube https://www.youtube.com/watch?v=1Y_aBjqGgO4]
This creates a great user experience while viewing the items without reloading the menu page.
You could use these methods addClass() and removeClass() to create such rich user experience in your applications.