提前致谢
我正在制作一个日历，其中包含月份列、事件列和事件描述列。我应该如何做到这一点，以便我能够在不同月份点击时更改事件？
“使用 jQuery 正确更改月份时，我应该如何更改事件列表？” 这是我当前的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Mitchell Bregman">
<meta charset="UTF-8">
<title>Community Page | Events</title>
<link rel="shortcut icon" href="">
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript">
$(document).ready(function(){
$('#description').hide();
$('.e1').hide();
$('.e2').hide();
$('.e3').hide();
$('.e4').hide();
$('.ev1').click(function(){
$('#description').fadeIn();
$('.e1').show();
$('.e2').hide();
$('.e3').hide();
$('.e4').hide();
});
$('.ev2').click(function(){
$('#description').fadeIn();
$('.e2').show();
$('.e1').hide();
$('.e3').hide();
$('.e4').hide();
});
$('.ev3').click(function(){
$('#description').fadeIn();
$('.e3').show();
$('.e2').hide();
$('.e1').hide();
$('.e4').hide();
});
$('.ev4').click(function(){
$('#description').fadeIn();
$('.e4').show();
$('.e2').hide();
$('.e3').hide();
$('.e1').hide();
});
});
</script>
<style type="text/css">
body{
background-image: url('http://subtlepatterns.com/patterns/kindajean.png');
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
overflow-x: hidden;
overflow-y: hidden;
}
p, h1, h2, h3, h4, h5, h6, span{
margin-top: 0px;
margin-bottom: 0px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
#white_bar{
height: 100%;
left: 0;
top: 0;
position: absolute;
width: 1%;
background-color: white;
border-right: 1px solid #BABABA;
}
#months{
width: 17%;
height: 100%;
top: 0;
left: 1%;
position: absolute;
background-image: linear-gradient(left , rgb(22,21,26) 0%, rgb(24,22,28) 100%);
background-image: -o-linear-gradient(left , rgb(22,21,26) 0%, rgb(24,22,28) 100%);
background-image: -moz-linear-gradient(left , rgb(22,21,26) 0%, rgb(24,22,28) 100%);
background-image: -webkit-linear-gradient(left , rgb(22,21,26) 0%, rgb(24,22,28) 100%);
background-image: -ms-linear-gradient(left , rgb(22,21,26) 0%, rgb(24,22,28) 100%);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, rgb(22,21,26)),
color-stop(1, rgb(24,22,28))
);
border-right: 1px solid #363636;
}
#months h1{
font-size: 19px;
color: white;
padding: 20px;
}
#months li{
list-style-type: none;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
margin-bottom: 3px;
font-size: 14px;
color: #BDBDBD;
padding: 5px 0px 5px 20px;
cursor: pointer;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#months li:hover{
background-color: rgba(120, 120, 120, .12);
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#events{
width: 28%;
height: 100%;
top: 0;
left: 18%;
position: absolute;
background-image: linear-gradient(left , rgb(174,170,189) 0%, rgb(190,187,199) 100%);
background-image: -o-linear-gradient(left , rgb(174,170,189) 0%, rgb(190,187,199) 100%);
background-image: -moz-linear-gradient(left , rgb(174,170,189) 0%, rgb(190,187,199) 100%);
background-image: -webkit-linear-gradient(left , rgb(174,170,189) 0%, rgb(190,187,199) 100%);
background-image: -ms-linear-gradient(left , rgb(174,170,189) 0%, rgb(190,187,199) 100%);
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0, rgb(174,170,189)),
color-stop(1, rgb(190,187,199))
);
border-right: 1px solid #B3B3B3;
}
#events h1{
font-size: 21px;
color: black;
padding: 20px;
}
#events li{
list-style-type: none;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
margin-bottom: 3px;
font-size: 14px;
color: #333333;
padding: 5px 0px 5px 20px;
cursor: pointer;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#events li:hover{
background-color: rgba(41, 127, 214, .5);
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#description{
width: 500px;
background-color: white;
height: 90%;
top: 50%;
margin-top: -45%;
left: 46%;
position: absolute;
overflow: none;
}
#description p{
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div id="white_bar">
</div>
<div id="months">
<h1>Months</h1>
<li class="jan">January</li>
<li class="feb">February</li>
<li class="mar">March</li>
<li class="apr">April</li>
<li class="may">May</li>
<li class="jun">June</li>
<li class="jul">July</li>
<li class="aug">August</li>
<li class="sep">September</li>
<li class="oct">October</li>
<li class="nov">November</li>
<li class="dec">December</li>
</div>
<div id="events">
<h1>Events</h1>
<li class="ev1">1/2/13 - General Meeting</li>
<li class="ev2">Event 2</li>
<li class="ev3">Event 3</li>
<li class="ev4">Event 4</li>
</div>
<div id="description">
<p class="e1">
<div style="margin: 0 auto; width:100%; height:400px;"><object type="text/html" data=".//Blank.html"" style="width:490px; height:1200px; margin:1%;"></object></div>
</p>
<p class="e2">event 2 desc</p>
<p class="e3">event 3 desc</p>
<p class="e4">event 4 desc</p>
</div>
</body>
</html>