В настоящее время у меня есть страница с четырьмя таблетками для таблеток Bootstrap. Содержимое, связанное с каждой из этих вкладок, представляет собой довольно большие таблицы. Из-за этого при загрузке сайта весь контент загружается, делая его очень медленным. Я хотел бы изменить его так, чтобы таблица для каждой вкладки не загружалась, пока пользователь не переключится на эту вкладку. Как я могу это сделать?Загрузка содержимого таблеток Bootstrap по клику
Ссылки на каждой вкладке следующим образом:
<ul class="nav nav-pills">
<li class="active"><a href="#active_projects"
data-toggle="tab">Active Projects</a></li>
<li><a href="#archived_projects" data-toggle="tab">Archived
Projects</a></li>
<li><a href="#active_families" data-toggle="tab">Active Families</a> </li>
<li><a href="#archived_families" data-toggle="tab">Archived Families</a> </li>
</ul>
Далее, у меня есть четыре divs
, которые загружаются содержание:
<div class="tab-content">
<div id="active_projects" class="tab-pane active"
style="margin-bottom: 80px;">
<div class="row-fluid">
<table class="table table-hover">
<?php echo $headers; ?>
<?php if (isset($this->active)) : ?>
<?php echo $this->partialLoop('project/project/projectSummary.phtml', $this->active) ?>
<?php endif; ?>
</table>
</div>
</div>
<div id="archived_projects" class="tab-pane"
style="margin-bottom: 80px;">
<div class="row-fluid">
<table class="table table-hover">
<?php echo $headers; ?>
<?php if (isset($this->archived)) : ?>
<?php echo $this->partialLoop('project/project/projectSummary.phtml', $this->archived) ?>
<?php endif; ?>
</table>
</div>
</div>
<div id="active_families" class="tab-pane"
style="margin-bottom: 80px;">
<div class="row-fluid">
<table class="table table-hover">
<?php echo $family_headers; ?>
<?php if (isset($this->active_families)) : ?>
<?php echo $this->partialLoop('projectFamily/projectFamily/familySummary.phtml', $this->active_families) ?>
<?php endif; ?>
</table>
</div>
</div>
<div id="archived_families" class="tab-pane"
style="margin-bottom: 80px;">
<div class="row-fluid">
<table class="table table-hover">
<?php echo $family_headers; ?>
<?php if (isset($this->archived_families)) : ?>
<?php echo $this->partialLoop('projectFamily/projectFamily/familySummary.phtml', $this->archived_families) ?>
<?php endif; ?>
</table>
</div>
</div>
</div>
Zend Framework используется для создания столы. Содержание вкладки изменяется с JavaScript
<script type="text/javascript">
// If a tab is specified by an anchor tag, activate it
// See: https://github.com/twbs/bootstrap/issues/2415#issuecomment-4589184
$(function() {
var activeTab = $('[href=' + location.hash + ']');
activeTab && activeTab.tab('show');
});
</script>
Я пытаюсь
Я думаю, я могу использовать JQuery load()
. Я могу заставить основную идею работать с чем-то по строкам document.getElementById("active_projects").innerHTML = ""
, но для этого требуется строка, что делает код не особенно приятным. Есть идеи?
Для загрузки данных вкладок вам необходимо использовать 'AJAX'. – newage
@newage вы можете привести пример? –