I'm encountering an issue with the final exercise in the jQuery course on Codecademy.
My goal is to replicate the navigation header as accurately as possible, but I'm struggling to figure out how to keep the selected div highlighted after it's been clicked.
Here's the functional jsFiddle.
And here is the original code:
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title></title>
</head>
<body>
<div id="show" contenteditable="true">Enter your text below:</div>
<div id="back"></div>
<div class="header">Files</div>
<div class="header">index.html</div>
<div class="header">style.css</div>
<div class="header">script.js</div>
</body>
</html>
style.css:
#back {
height: 50px;
width: 400px;
position: absolute;
}
#show {
background-color: rgb( 35, 44, 49 );
color: #FFFFFF;
height: 400px;
width: 400px;
top: 58px;
position: absolute;
}
.header {
font-family: helvetica;
float: left;
background-color: #212121;
color: rgb(105, 105, 105);
position: relative;
height: 50px;
width: 100px;
text-align: center;
}
script.js:
$(document).ready(function() {
$("#show").hide();
$(".header").click(function() {
$(this).stop().animate( {
color: "white",
backgroundColor: "rgb( 35, 44, 49 )"
});
$("#show").show();
});
$(".header").mouseenter(function() {
$(this).css("cursor", "pointer");
$(this).stop().animate( {
color: "white",
backgroundColor: "rgb( 45, 60, 70 )"
});
});
$(".header").mouseleave(function() {
$(this).stop().animate( {
color: "#696969",
backgroundColor: "rgb( 33, 33, 33)"
});
});
});
Any assistance would be greatly appreciated.