<!--Scripts by hscripts.com-->
<!--More scripts @ www.hscripts.com-->
<html>
<head>
<title>Jquery Add, Remove, Replace Class</title>
<script>
function add(id,cls){
$("#"+id).addClass(cls);
$("#add").css("display","none");
$("#remove").css("display","inline");
$("#rm").css("display","none");
$("#am").css("display","block");
}
function removestyle(id,cls){
$("#"+id).removeClass(cls);
$("#remove").css("display","none");
$("#add").css("display","inline");
$("#rm").css("display","block");
$("#am").css("display","none");
}
function replace(id,cls,rcls){
$("#"+id).removeClass(cls).addClass(rcls);
$("#replace1").css("display","inline");
$("#replace").css("display","none");
}
function replace1(id,cls,rcls){
$("#"+id).removeClass(cls).addClass(rcls);
$("#replace").css("display","inline");
$("#replace1").css("display","none");
}
</script>
<style>
.addcls{
font-weight:bold;font-size:1.2em;color:yellow;
background:green;border-radius: 25px;padding:10px;
}
.remove{
font-weight:bold;font-size:1.2em;
color:red;font-style:italic;
}
.replace{
border: 2px solid #a1a1a1;padding:10px;
background: #dddddd;border-radius: 25px;font-weight:bold;
}
.add1{
font-weight:bold;font-size:1.3em;color:orange;font-style:oblique;
}
.table{
margin:20px 1px;padding:0px;border:0px;border-spacing: 0;
overflow: auto;width:100%;border-spacing: 0;
}
.table td{
border-spacing: 0;border-collapse:collapse;border:1px solid #e8e8e8;padding:2px 2px 2px 12px;-moz-box-shadow:
inset 0 0 1px #fff;-o-box-shadow:
inset 0 0 1px #fff;-webkit-box-shadow: inset 0 0 1px #fff;box-shadow:
inset 0 0 1px #fff;font:normal 0.8em/26px Tahoma, Geneva, sans-serif;color:#666;text-shadow:#fff 1px 1px 0px;vertical-align:middle;padding:2px 2px 2px 12px;
}
input[type="button"]{
padding:7px 14px;font-weight:bold;color:#fff;
cursor:pointer;border-radius:.3em;-moz-border-radius:.2em;
-webkit-border-radius:.2em;-o-border-radius:.2em;margin:10px 0;border:none;
}
input[type="button"]{
background:#468cd2;border-bottom:#3277bc 3px solid;text-shadow:#214d73 1px 1px 0px;}
body {
background: #fff none repeat scroll 0 0;font:1em/150% Tahoma,Geneva,sans-serif;}
.resp_code{
margin:5px 10px 10px 300px;padding:10px 20px 10px 20px;
font: bold 0.8em/26px Tahoma,Geneva,sans-serif;overflow:auto;width:50%;
}
@media screen and (max-width: 480px){
.resp_code{width:auto !important;margin:0px !important;}
}
</style>
</head>
<body>
<div class='resp_code'>
<center><b>Jquery Add, Remove, Replace Class</b></center><table class='table' id='selection'>
<tr>
<td><input type='button' id='add' value='Add' onclick="add('am','addcls')">
<input type='button' id='remove' value='Remove' style='display:none;' onclick="removestyle('rm','remove')">
</td>
<td>
<div id='am' class='add' align='center'>This is add class div</div>
<div id='rm' class='remove' align='center' style='display:none;'>This is remove class div</div>
</td>
</tr>
<tr>
<td>
<input type='button' id='replace' value='Replace' onclick="replace('rp','replace','add1')">
<input type='button' id='replace1' value='Replace' style='display:none;' onclick="replace1('rp','add1','replace')">
</td>
<td>
<div class='replace' id='rp' align='center'>This is replace class div</div>
</td>
</tr>
</table>
<div id="dumdiv" align="center" style=" font-size: 10px;color: #dadada;"><a id="dum" style="padding-right:0px; text-decoration:none;color: green;text-align:center;" href="http://www.hscripts.com">©h</a></div>
</div>
</body>
</html>
<!--Scripts by hscripts.com-->
<!--More scripts @ www.hscripts.com-->
<script>
function add(id,cls){
$("#"+id).addClass(cls);}function removestyle(id,cls){
$("#"+id).removeClass(cls);}function replace(id,cls,replacecls){
$("#"+id).removeClass(cls).addClass(replacecls);
}
</script>