Adding and removing and toggle CSS classes is a effective method to highlight changes in web pages. jQuery provides different Attributes for .addClass(), .removeClass() and toggleClass methods.
addClass():
jQuery:
<script type="text/javascript">
$(document).ready(function(){
$("p.list").click(function(){
$(this).addClass("active");
});
});
</script>
The CSS:
<style type="text/css">
p{
float: left;
width: 33.3%;
padding: 0;
margin: 0;
}
.block {
margin-right: 10px;
padding: 20px;
background: #fff;
}
.active {background: #ccc;}
</style>
removeClass():
jQuery:
$(document).ready(function(){
$("p.list").click(function(){
$(this).removeClass("list");
});
});
The CSS:
<style type="text/css">
p {
float: left;
width: 33.3%;
padding: 0;
margin: 0;
margin-right: 10px;
padding: 20px;
}
.list{
margin-right: 10px;
padding: 20px;
background: #CCCCCC;
}
</style>
toggleClass():
jQuery:
<script>
$(document).ready(function(){
$("p.list").click(function(){
$(this).toggleClass("active");
});
});
</script>
The CSS:
<style type="text/css">
p{
float: left;
width: 33.3%;
padding: 0;
margin: 0;
}
.block {
margin-right: 10px;
padding: 20px;
background: #fff;
}
.active {background: #ccc;}
</style>

RSS Feeds
Feed Comment 




Leave Your Comments Below