我正在为我的8年级社会研究课写一篇内战期刊，我将其作为HTML文件呈现，其中包含每个期刊的标题和日期。当我点击每个条目时，它应该打开实际日记帐分录并关闭任何其他打开的日记帐分录。点击日记后，我在打开日记帐分录时遇到问题。这是我的代码。 （P.S.所有期刊参赛作品尚未完成。）
编辑：代码在JSFiddle中工作，但不在浏览器中。
HTML
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel='stylesheet' href='journal.css'/>
<title>Pericby Zarby Journal</title>
</head>
<body>
<div id='container'>
<div class='entry current'>
<div class='item row'>
<div class="col-xs-3">
<p class='date'>July 22, 1861</p>
</div>
<div class='col-xs-6'>
<p class='title'>The Battle of Bull Run</p>
</div>
</div>
<div class='description row'>
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<p>As I step through the door of the steel mill, I overhear the conversation that my boss and one of my co-workers are having.
I hear something about a battle and the start of a civil war. I walk by and suddenly my friend Joe runs up to me and says, 'Did ya hear?'
I give him a funny look that shows how confused I am. He proceeds to tell me about the Battle of Bull Run.
He says that a small skirmish between the Union and Confederate armies happened in Virginia. He also says that the Union lost.
That last part really surprises me. The North is supposed to have a lot more men than the South and should have destroyed the South.
Hopefully the rest of the war does not go like this.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
<div class='entry'>
<div class='item row'>
<div class='col-xs-3'>
<p class='date'>December 15, 1862</p>
</div>
<div class='col-xs-6'>
<p class='title'>Fredericksburg</p>
</div>
</div>
<div class='description row'>
<div class='col-xs-3'> </div>
<div class='col-xs-6'>
<p>While I am drinking and talking with some of the other blacks in the 86th regiment, I spot a small man running up to Colonel Smith
and telling him that General Burnside needs reinforcements. Smith shouts for everyone to get into formation and begin marching towards
Fredericksburg. After about an hour of marching I am finally able to see a battlefield, but it does not look pretty.
A group of Union soldiers is charging towards a Confederate barricade. One by one, each soldier is getting killed.
No progress is made by the soldiers. My regiment begins to line up in formation for another charge. As Burnside begins to realize that the
charge before is proving futile he barks a command to retreat. My regiment marches in an orderly fashion back to the nearest Union camp.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
<div class='entry'>
<div class='item row'>
<div class='col-xs-3'>
<p class='date'>January 2, 1863</p>
</div>
<div class='col-xs-6'>
<p class='title'>Emancipation Proclamation</p>
</div>
</div>
<div class='description row'>
<div class='col-xs-3'> </div>
<div class='col-xs-6'>
<p>It’s official. Lincoln has released the Emancipation Proclamation. Slaves from states in rebellion are now free.
Southern plantations won’t let that happen though. No slaves are going to be freed, yet. The best thing about the Emancipation Proclamation
is that now slaves have something to fight for. They will begin to help win this war, in big and small ways.
Also, France and Great Britain can’t help the South anymore because they are slave-free countries.
Lincoln may have just given the Union the boost they need to win this civil war. I know it has given me hope.</p>
</div>
<div class='col-xs-3'> </div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="journal.js"></script>
</body>
</html>
CSS
body {
position: fixed;
background-image: url("http://housedivided.dickinson.edu/grandreview/wp-content/uploads/2010/02/HD_4USCinfantryDetail.preview.jpg");
background-size: cover;
}
#container {
height: 700px;
width: 600px;
border-right: 3px black solid;
border-left: 3px black solid;
border-bottom: 3px black solid;
position: fixed;
margin: 10px auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.row {
margin: 0;
}
.current .item{
background-color: rgba(112,112,112,0.7);
}
.entry {
background-color: rgba(216, 209, 209, 0.7);
border-top: 3px solid black;
}
.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 18px;
}
.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}
.item .date {
margin-left: 20px;
font-weight: bold;
font-style: italic;
}
.item .title {
font-weight: bold;
font-size: 20px;
text-align: center;
}
的Javascript
var main = function() {
$('.entry').click(function() {
$('.entry').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
}
$(document).ready(main);
答案 0 :(得分：1)
如果您在本地工作，则可能需要更改此行：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
为：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>