tab切换
- 5秒钟
- 10秒钟
- 15秒钟
html
<div class="container">
<ul class="tabs">
<li class="active">5秒钟</li>
<li>10秒钟</li>
<li>15秒钟</li>
</ul>
<div class="tab_container" >
<div id="tab1" class="tab_content" >
<div id="echart" style="width: 100%; height:400px;"></div>
<table class="table">
<thead>
<tr>
<th>时间</th>
<th>买入价格</th>
<th>买入数量</th>
</tr>
</thead>
<tbody id="btcData"></tbody>
</table>
</div>
<div id="tab2" class="tab_content">
<div id="echart1" style="width: 1100px; height:400px;"></div>
<table class="table">
<thead>
<tr>
<th>时间</th>
<th>买入价格</th>
<th>买入数量</th>
</tr>
</thead>
<tbody id="btcData1"></tbody>
</table>
</div>
<div id="tab3" class="tab_content">
<div id="echart2" style="width: 1100px; height:400px;"></div>
<table class="table">
<thead>
<tr>
<th>时间</th>
<th>买入价格</th>
<th>买入数量</th>
</tr>
</thead>
<tbody id="btcData2"> </tbody>
</table>
</div>
</div>
</div>
js
$(document).ready(function() {
$("ul.tabs li:first").addClass("active").show();
$(".tab_container .tab_content").not(':first-of-type').hide();
/**
*点击事件
*/
$("ul.tabs li").on("click",function() {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
$(".tab_container .tab_content").eq(index).show();
$(".tab_container .tab_content").eq(index).siblings().hide();
});})