我需要有选项卡，当单击选项卡时，我需要能够执行 jquery 脚本来填充每个选项卡中的 div。当我切换到其他选项卡时，其他选项卡数据应显示在 div 上。我有这个脚本来隐藏和显示活动选项卡的数据：
<script>
// Wait until the DOM has loaded before querying the document
$(document).ready(function () {
$('ul.tabs').each(function () {
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
// Hide the remaining content
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function (e) {
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $($(this).attr('href'));
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
});
</script>
这是html：
<ul class='tabs'>
<li><a href='#tab1'>SITEPERFORMANCE</a></li>
<li><a href='#tab2'>DB</a></li>
<li><a href='#tab3'>WEB</a></li>
<div id="tab2">
<div id="container">
<table align="center">
<tr>
<td>
<div class="zoom_controls">
<div class="zoom_controls">
<a class="DB" id="prof_cpu_d" href="#" data-chart="line" data-range="1m">Real Time</a>
<a class="DB" id="prof_cpu_w"href="#" data-chart="line" data-range="3m">Weekly</a>
<a class="DB" id="prof_cpu_m" href="#" data-chart="line" data-range="6m">Monthly</a>
<a class="DB" id="prof_cpu_f"href="#" data-chart="line" data-range="All">Forecast</a>
</div>
</div>
<div id="container_cpu" style="width:700px; height:300px;"></div></td>
</tr>
</table>
<br>
<table align="center">
<tr>
<td>
<div class="zoom_controls">
<div class="zoom_controls">
<a class="DB" id="prof_pc_d" href="#" data-chart="line" data-range="1m">Real Time</a>
<a class="DB" id="prof_pc_w"href="#" data-chart="line" data-range="3m">Weekly</a>
<a class="DB" id="prof_pc_m" href="#" data-chart="line" data-range="6m">Monthly</a>
<a class="DB" id="prof_pc_f"href="#" data-chart="line" data-range="All">Forecast</a>
</div>
</div>
<div id="container_pc" style="width:700px; height:300px;"></div></td>
</tr>
</table>
<br>
<table align="center">
<tr>
<td>
<div class="zoom_controls">
<div class="zoom_controls">
<a class="DB" id="prof_mem_d" href="#" data-chart="line" data-range="1m">Real Time</a>
<a class="DB" id="prof_mem_w"href="#" data-chart="line" data-range="3m">Weekly</a>
<a class="DB" id="prof_mem_m" href="#" data-chart="line" data-range="6m">Monthly</a>
<a class="DB" id="prof_mem_f"href="#" data-chart="line" data-range="All">Forecast</a>
</div>
</div>
<div id="container_memory" style="width:700px; height:300px;"></div></td>
</tr>
</table>
</div>
</div>
我也有这个小 jquery 来执行一些功能并在单击选项卡时加载 div：
$("#tab2").click(function () {
db_cpu();
db_pc();
db_memory();
});
db_cpu()、db_pc()、db_memory() 函数用于创建图表并填充相应的 div（这些函数有效）。
当我单击 tab2 时，我没有填充 div。但是当点击像 prof_cpu_d 这样的内部 div 时，它可以工作。单击选项卡时，我需要填充 div。知道单击 tab2 时如何调用 db_cpu、db_pc 和 db_memory 吗？
如果我单击页面正文中的任何位置，div 会加载？这与任何缓存有关吗？单击选项卡div时，有没有办法强制第一次加载？
这是标签的CSS：
.tabs li {
list-style:none;
display:inline;
}
.tabs a {
padding:5px 10px;
display:inline-block;
background:#C0C0C0;
color:#000;
text-decoration:none;
text-align: center;
font: 18px sans serif;
font-weight: bold;
}
.tabs a.active {
background:#6E6EFF;
color:#fff;
}