【html】【19】高级篇--大事件时间轴

下载:　　http://sc.chinaz.com/jiaoben/131112181390.htm

其它:　　http://sc.chinaz.com/tag_jiaoben/shijianzhou.html

效果:　　

html 代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <link rel="stylesheet" href="css/about.css">
 6 <style>
 7 .page { width:100%;background:#F0F0F0 url('img/dian2.png') repeat-x; }
 8 </style>
 9 <title>大事记jQuery时间轴</title>
10 </head>
11 <body>
12 <div class="page">
13 <div class="header">
14 </div>
15 
16 <div class="box">
17     <ul class="event_year">
18         <li class="current"><label for="2013">2013</label></li>
19         <li><label for="2012">2012</label></li>
20         
21     </ul>
22     <ul class="event_list">
23         <div>
24             <h3 id="2013">2013</h3>
25             <li>
26             <span>5月26日</span>
27             <p><span>站长之家专栏改版上线</span></p>
28             </li>
29                 <li>
30             <span>4月</span>
31             <p><span>站长工具旗下产品，超级监控上线</span></p>
32             </li>
33         </div>
34         <div>
35             <h3 id="2012">2012</h3>
36             <li>
37             <span>9月</span>
38             <p><span>站长之家北京分公司成立</span></p>
39             </li>
40             
41         </div>
42         
43     </ul>
44     <div class="clearfix"></div>
45     
46     </div>
47 </div>
48 <script src="js/jquery.min_v1.0.js" type="text/javascript"></script>
49 <script>
50 $(function(){
51     $('label').click(function(){
52         $('.event_year>li').removeClass('current');
53         $(this).parent('li').addClass('current');
54         var year = $(this).attr('for');
55         $('#'+year).parent().prevAll('div').slideUp(800);
56         $('#'+year).parent().slideDown(800).nextAll('div').slideDown(800);
57     });
58 });
59 </script>

60 <div style="text-align:center;clear:both">
61 <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
62 </div>
63 </body>
64 </html>