$(document).ready(function () {
var allClass = 'aqua orange red green';
$(":button").click(function (e) {
var appliedClassName = $('#target')[0].className;
$('#target').removeClass(appliedClassName).addClass(e.target.id);
});
});
<html>
<head>
<title>addClass</title>
</head>
<body>
<p id="target">This is p element. This is our target element.</p>
<br /><br />
<input type="button" id="aqua" value="Add class aqua"/>
<input type="button" id="orange" value="Add class orange"/>
<input type="button" id="red" value="Add class red"/>
<input type="button" id="green" value="Add class green"/>
<input type="button" value="Reset" onclick="location.reload()" />
</body>
</html>
.aqua
{
color:aqua;
font-family:comic sans ms;
font-weight:bold;
}
.orange
{
color:orange;
font-family:comic sans ms;
font-weight:bold;
}
.red
{
color:red;
font-family:comic sans ms;
font-weight:bold;
}
.green
{
color:green;
font-family:comic sans ms;
font-weight:bold;
}