jQuery时光轴历史记录网站大事记特效

预览地址https://pdbn.top/uploads/2016/01/shijianzhou/shijianzhou.html

jQuery时间轴网站大事记特效。

代码调用：

html部分：

<div class="box">

 <ul class="event_year">
 <li class="current"><label for="2013">2013</label></li>
 <li><label for="2012">2012</label></li>
 <li><label for="2011">2011</label></li>
 </ul>

 <ul class="event_list">

 <div>
 <h3 id="2013">2013</h3>
 <li><span>5月</span><p><span>站长之家专栏改版上线</span></p>
 </li>
 <li><span>4月</span><p><span>站长工具旗下产品，超级监控上线</span></p>
 </li>
 <li><span>3月</span><p><span>站长之家创业栏目上线</span></p>
 </li>
 </div>

 <div>
 <h3 id="2012">2012</h3>
 <li><span>9月</span><p><span>站长之家北京分公司成立</span></p>
 </li>
 </div>

</ul>

</div>

js部分：

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
    $('label').click(function(){
        $('.event_year>li').removeClass('current');
        $(this).parent('li').addClass('current');
        var year = $(this).attr('for');
        $('#'+year).parent().prevAll('div').slideUp(800);
        $('#'+year).parent().slideDown(800).nextAll('div').slideDown(800);
    });
});
</script>

来源：xw素材网