Tipo questo ma dovrebbe poter tornare verde
codice:
<html><head>
    <title> Div, class, id </title>
    <link rel="stylesheet" href="stylesheets/style.css"/>


<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>


<style>
body {
color: #a280e2;
font: 1.2em/1.4em 'Myriad Pro', Helvetica, Arial, Sans-serif,;
text-align: left;
margin: 0px;
}




.yellow {
background: yellow;
margin: 100 auto;
padding: 20px; 
width: 100px;
height: 100px;
}


.green {
background: green;
margin: 100 auto;
padding: 20px;
width: 100px;
height: 100px;
}


#Blue {
background: #2700ff;
margin: 100 auto;
padding: 20px; 
width: 100px;
height: 100px; 
}


#Red {
background: #ff0000;
margin: 100 auto;
padding: 20px;
width: 100px;
height: 100px;
}
</style>


<script>
$( document ).ready(function() {
console.log( "ready!" );
$( "#Blue" ).click(function() {
$('#Blue').css('background-color', 'yellow');
alert( "Color Changed" );
});
$( "#Red" ).click(function() {
$('#Red').css('background-color', 'green');
alert( "Color Changed" );
});
});


</script>




</head>
<body> 


    <div id="Blue" class="yellow"></div>
    <div id="Red" class="Green"></div>
</body>
</html>