1
節目通過點擊next和prev，直至固定舞臺的JavaScript/jQuery的
$(document).ready(function(){
$(".pr-calendar div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".pr-calendar div:visible").next().length != 0)
$(".pr-calendar div:visible").next().show().prev().hide();
else {
$(".pr-calendar div:visible").hide();
$(".pr-calendar div:first").show();
}
return false;
});
$("#prev").click(function(){
if ($(".pr-calendar div:visible").prev().length != 0)
$(".pr-calendar div:visible").prev().show().next().hide();
else {
$(".pr-calendar div:visible").hide();
$(".pr-calendar div:last").show();
}
return false;
});
});.f-d{
background-color: #01BC8C;
height: 220px;
border-radius: 10px;
padding: 1px;
}
.pr-calendar{
background-color: #01BC8C;
}
.see-upline{
background-color: #F89A15;
}
.lt-news{
background-color: #428BCA;
}
.upline-chart{
background-color: #EF706D;
}
.myprofit-calendar{
background: #CCC;
position: relative;
}
.prev-next-button {
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
transform: translateY(-50%);
}
#prev { left: 10px; }
#next { right: 10px; }
.pr-calendar table{
margin:0 auto;
width: 300px;
}
.pr-calendar table td{
padding: 5px;
color:#fff;
}
.text-center{
text-align:center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="margin-bottom:30px;">
<div class="col-lg-3 margin_10 animated fadeInRightBig">
<div class="myprofit-calendar">
<div class="f-d pr-calendar">
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">July 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>8%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>12%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>20%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">August 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>5%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>15%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>9%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>17%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>15%</td>
</tr>
</tbody>
</table>
</div>
<div class="month">
<!-- <i class="livicon" data-name="calendar" data-size="50" data-c="#fff" data-hc="#fff" data-loop="true"></i>-->
<h3 class="text-center" style="color: #fff;">September 2017</h3>
<table class="table-responsive">
<tbody>
<tr class="warning">
<td>SEO</td>
<td>2%</td>
</tr>
<tr class="danger">
<td>Affiliate</td>
<td>5%</td>
</tr>
<tr class="info">
<td>Webs</td>
<td>15%</td>
</tr>
<tr class="warning">
<td>Apps</td>
<td>10%</td>
</tr>
<tr class="info">
<td>Crypto&Mining</td>
<td>11%</td>
</tr>
</tbody>
</table>
</div>
</div>
<a id="next" class="prev-next-button"><i class="fa fa-arrow-right"></i></a>
<a id="prev" class="prev-next-button"><i class="fa fa-arrow-left"></i></a>
</div>
</div>
</div>我想設置七月一個月格在默認情況下，點擊旁邊將顯示威嚴的月最大後顯示DIV或內容。但是，當點擊上一個按鈕時，我想顯示的是前11個月到9月。換句話說，我想製作一個利潤日曆，它將顯示從7月到6月開始的利潤百分比。起點。我應該寫什麼代碼，請別人幫我