タブが必要で、タブをクリックしたときに 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>
また、いくつかの機能を実行し、タブをクリックしたときに div をロードするための小さな jquery もあります。
$("#tab2").click(function () {
db_cpu();
db_pc();
db_memory();
});
チャートを作成し、対応する div を設定する db_cpu()、db_pc()、db_memory() 関数 (これらの関数は機能します)。
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;
}