<!DOCTYPE html />
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.wrapper
{
width: 200px;
height: 200px;
}
.color
{
width: 20px;
height: 20px;
}
.red
{
background-color: #f00;
}
.green
{
background-color: #0f0;
}
.blue
{
background-color: #00f;
}
</style>
</head>
<body>
<div class="wrapper"></div>
<div class="color red" id="a1"></div>
<div class="color green" id="a2"></div>
<div class="color blue" id="a3"></div>
<script type="text/javascript">
$(document).ready(
function () {
for (var i = 1; i <= 3; i++) {
$("#a" + i).click(function () {
$(".wrapper").css("background-color", $(this).css("background-color"));
});
}
}
);
</script>
</body>
</html>