欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

tab切换

程序员文章站 2022-04-14 13:32:40
html
 
     
  • 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();

});})