<!DOCTYPE html>
<html>
<head>
<title>Welcome to jQuery #3!</title>
<link rel="stylesheet" href="script03.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="script03.js"></script>
</head>
<body>
<h1 id="colorMe">Pick a color</h1>
<p>
<a id="red">Red</a>
<a id="green">Green</a>
<a id="blue">Blue</a>
</p>
</body>
</html>
a {
display: block;
float: left;
padding: 10px;
margin: 10px;
font-weight: bold;
color: white;
background-color: gray;
}
a:hover {
color: black;
background-color: silver;
}
$(document).ready(function() {
$("a").click(function(evt) {
$("#colorMe").css({
"color": $(this).attr("id")
});
evt.preventDefault();
});
});
To change the color of the object with the id of colorMe
Add a click event to all anchors