Tuesday, January 12, 2010

addClass & removeClass in jquery



<style>
.red
{
background-color:#CC0033;
color:green;
font-weight:bold;
}
.green
{
background-color:#003300;
color:red;
font-weight:bold;
}
#myDiv
{
border:3px double #000000;
}
</style>
<script>
$(document).ready(function(){
$(“#addclass_red”).click(function ()
{
$(“#myDiv”).addClass(“red”);
$(“#myDiv”).removeClass(“green”);
});
$(“#addclass_green”).click(function ()
{
$(“#myDiv”).addClass(“green”);
$(“#myDiv”).removeClass(“red”);
});
});
</script>
<div id=”myDiv” style=”width:100px; height:30px;”>div 1</div>
<input type=”button” id=”addclass_red” name=”addclass_red” value=”Add Red” />
<input type=”button” id=”addclass_green” name=”addclass_green” value=”Add Green” />
when click on “Add Red” button the function add red class to div myDiv & removing the class green.

similarly, when click on “Add Green” button the function add greenclass to div myDiv & removing the class red.

No comments: