下载: 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>
ok