我在Codecademy的 jQuery 轨道上的最后一个练习有问题。
我正在尝试尽可能接近地重新创建导航标题,但是我找不到让选定的 div 在单击时保持选中状态的方法。
这是工作的jsFiddle。
这是原始代码:
索引.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>
样式.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;
}
脚本.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)"
});
});
});
帮助将不胜感激。