Demo:-
Instruction:- To Use this code Download jquery-1.9.1.min.js from
http://jquery.com/download/ and link as shown in code below.
Code:-
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#b1').click(function()
{
$('#d1').css({background:'lightyellow',border:'solid 2px darkgreen',color:'darkgreen',padding:'12px',width:'300px'});
});
$('#b2').click(function()
{
$('#d1').css({background:'smokewhite',border:'solid 2px darkred',color:'darkred',padding:'12px',width:'300px'});
});
$('#b3').click(function()
{
$('#d1').css({background:'skyblue',border:'solid 2px darkblue',color:'darkblue',padding:'12px',width:'300px'});
});
$('#b11').click(function()
{
$('#d2').removeClass();
$('#d2').addClass('green');
});
$('#b22').click(function()
{
$('#d2').removeClass();
$('#d2').addClass('red');
});
$('#b33').click(function()
{
$('#d2').removeClass();
$('#d2').addClass('blue');
});
$('#btnShow').click(function()
{
$('#d1').show('fadeIn');
});
$('#btnHide').click(function()
{
$('#d1').hide('fadeOut');
});
$('#btnToggle').click(function()
{
$('#d2').toggle('slow');
});
});
</script> <style type="text/css">
.green{background:lightyellow;border:solid 2px darkgreen;color:darkgreen;padding:12px;width:300px}
.red{background:pink;border:solid 2px darkred;color:darkred;padding:12px;width:300px}
.blue{background:skyblue;border:solid 2px darkblue;color:darkblue;padding:12px;width:300px}
</style>
</head>
<body>
<div id="d1" style="width:150;height:100;">
<a href="http://aspdotnetstudio.blogspot.in/"><h2>Aspdotnet Studio<h2></a>
</div>
<br><br><hr><br>
<input id="b1" type="button" value="Green Theme"/>
<input id="b2" type="button" value="Red Theme"/>
<input id="b3" type="button" value="Blue Theme"/>
<input id="btnHide" type="button" value="hide"/>
<input id="btnShow" type="button" value="show"/>
</body>
</html>
