【html】【19】高级篇--大事件时间轴
生活随笔
收集整理的這篇文章主要介紹了
【html】【19】高级篇--大事件时间轴
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
下載: 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>站長工具旗下產(chǎn)品，超級監(jiān)控上線</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
?
轉(zhuǎn)載于:https://www.cnblogs.com/aiqingqing/p/5041565.html
總結
以上是生活随笔為你收集整理的【html】【19】高级篇--大事件时间轴的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ASP.NET MVC5 与EF6学习系
- 下一篇： Linux下使用Speedtest测试网