tab切换

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();

});})