单击时加载 Bootstrap 药丸内容

Question

我目前有一个包含四个 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 框架用于创建表。使用 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 = "" 获得基本的想法，但这需要一个字符串，这使得代码不是特别好。有什么想法吗？

Answer 1

如果选中，您需要使用AJAX 为选项卡加载数据。 例如：

HTML 部分

<ul class="nav nav-pills">
    <li class="active">
        <a href="#" class="active_projects" data-toggle="tab">Active Projects</a>
    </li>
    ...
</ul>

HTML 的另一部分

<div id="active_projects" class="tab-pane active" style="margin-bottom: 80px;">
    <div class="row-fluid">
        <!-- Data from AJAX query will insert here -->
    </div>
</div>

JQuery 部分 (http://api.jquery.com/jQuery.ajax/)

$(".active_projects").click(function() {
    $.ajax({
        method: "GET",
        url: "/controller/action/active_projects"
    })
    .done(function( msg ) {
        alert( "Data Saved: " + msg );
    });
});

在 PHP 中需要使用 JSON 响应创建操作

public function loadAction()
{
    $view = JsonModel();
    $view->addValues(["table" => "this will table data"]);
    return $view;
}