<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<style>
*{margin:0;padding:0;}
.bgimg{100%;background:url(arrow.png) center no-repeat;background-position-y:20px;}
.monthwrap{100%;margin:auto;padding-left:10%;box-sizing:border-box;}
.month{7%;text-align: center;display: inline-block;background:url(yue_zc.png) top no-repeat;height:67px;background-size: 100%;color:#fff;padding-top:20px;cursor: pointer;}
.active{
background:url(yue_dx.png) top no-repeat;
color:#333;
font-weight: bold;
font-size: 16px;
}
.cut,.add{cursor: pointer;50px;}
.timewrap{
background: #14424f repeat;
color: #fff;
font-size: 18px;
margin-top:20px;border-radius:10px;
text-align:center;
padding-bottom:3px;
}
.year{margin-left:20px;margin-right:20px;}
</style>
<body>
<div class="row">
<div class="col-lg-3 timewrap">
<span class="cut">
<img src="sj1.png" alt=""/>
</span>
<span class="year">2017</span>
<span class="add">
<img src="sj2.png" alt=""/>
</span>
</div>
<div class="col-lg-9 plr0">
<div class="bgimg">
<div class="monthwrap">
<span class="month">1月</span>
<span class="month">2月</span>
<span class="month">3月</span>
<span class="month">4月</span>
<span class="month">5月</span>
<span class="month active">6月</span>
<span class="month">7月</span>
<span class="month">8月</span>
<span class="month">9月</span>
<span class="month">10月</span>
<span class="month">11月</span>
<span class="month">12月</span>
</div>
</div>
</div>
</div>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
$(function(){
$(".cut").click(function(){
var subval = $('.year').text();
// alert(subval);
var cutyear =parseInt(subval)-1;
//alert(cutyear);
$('.year').empty().text(cutyear);
alert($('.year').text()+'年'+$('.active').text())
});
$(".add").click(function(){
var subval = $('.year').text();
// alert(subval);
var cutyear =parseInt(subval)+1;
$('.year').empty().text(cutyear);
alert($('.year').text()+'年'+$('.active').text())
});
$(".month").click(function(event) {
$(this).addClass('active').siblings().removeClass('active');
alert($('.year').text()+'年'+$('.active').text())
});
});
</script>
</body>
</html>
