当前位置:首页 > 网页设计 >HTML >

一款精简实用的时间轴插件

发布时间:2020-07-10 16:58:35 作者:佚名 阅读:(107)

给客户做网站的时候,在一些页面我们用到时间轴展示对应的时间,接下来吾爱编程为大家分享一款精简实用的时间轴插件,有需要的小伙伴可以参考一下:

1、html代码:

<div class="box">
  <div class="timeline">
    <ul class="year">
      <li class="active">
        <div class="year-button"> 2020 </div>
        <ul class="month">
          <li><a href="#">12月</a></li>
          <li><a href="#">11月</a></li>
          <li><a href="#">10月</a></li>
          <li><a href="#">9月</a></li>
          <li><a href="#">8月</a></li>
          <li class="active"><a href="#">7月</a></li>
          <li><a href="#">6月</a></li>
          <li><a href="#">5月</a></li>
          <li><a href="#">4月</a></li>
          <li><a href="#">3月</a></li>
          <li><a href="#">2月</a></li>
          <li><a href="#">1月</a></li>
        </ul>
      </li>
      <li>
        <div class="year-button"> 2019 </div>
        <ul class="month">
          <li><a href="#">12月</a></li>
          <li><a href="#">11月</a></li>
          <li><a href="#">10月</a></li>
          <li><a href="#">9月</a></li>
          <li><a href="#">8月</a></li>
          <li><a href="#">7月</a></li>
          <li><a href="#">6月</a></li>
          <li><a href="#">5月</a></li>
          <li><a href="#">4月</a></li>
          <li><a href="#">3月</a></li>
          <li><a href="#">2月</a></li>
          <li><a href="#">1月</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

2、js代码:

<script type="text/javascript">
   $(function(){
    //隐藏所有子栏目(除第一个栏目外)
	$(".year:not(:first)").find(".month").hide();
	//点击大栏目
	  $(".year>li").click(function(){
		  $("li.active",$(this).parent()).removeClass("active");
		  $(this).addClass("active");
		  $("ul>li:first",this).addClass("active");		  		  
	  });
	  $(".month>li").click(function(){
		  var $ul=$(this).parent();		  
		  $ul.find(".active").removeClass("active");		  
		  $(this).addClass("active");
          return false;		  
	  });
   });
</script>

3、css代码:

@charset "utf-8";
* {
	margin: 0;
	padding: 0
}
body {
	font-size: 12px
}
li {
	list-style: none
}
a {
	text-decoration: none
}
.timeline {
	background: url(../images/timeline-line.png) repeat-y 10px;
	width: 80px;
	float: left
}
.year li .year-button {
	cursor: pointer;
	background: url(../images/timeline-bg.png) 0 -175px no-repeat;
	height: 25px;
	padding-left: 22px;
	margin-left: 8px;
	line-height: 25px
}
.year li .year-button:hover {
	background: url(../images/timeline-bg.png) 0 -29px no-repeat
}
.year>.active .year-button {
	background: url(../images/timeline-bg.png) 0 0 no-repeat;
	color: #fff
}
.year>.active .year-button:hover {
	background: url(../images/timeline-bg.png) 0 0 no-repeat;
	color: #fff
}
.month {
	display: none;
	margin-left: 7px
}
.active>.month {
	display: block
}
.month>li {
	cursor: pointer;
	height: 25px;
	padding-right: 25px;
	line-height: 25px;
	text-align: right
}
.month>li a {
	color: #000
}
.month>li.active {
	background: url(../images/timeline-bg.png) 0 -89px no-repeat
}
.month>li.active a {
	color: #fff
}
.month>li:hover {
	background: url(../images/timeline-bg.png) 0 -119px no-repeat
}
.month>li.active:hover {
	background: url(../images/timeline-bg.png) 0 -89px no-repeat
}

4、样式中图片:


以上就是吾爱编程为大家介绍的一款精简实用的时间轴插件,了解更多相关文章请关注吾爱编程网!

欢迎分享转载→ 一款精简实用的时间轴插件

© 2015-2019 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们