我正在尝试

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 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 = ""的内容，但这需要一个字符串，使代码不是特别好。有什么想法吗？

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;
}

点击加载Bootstrap药丸内容

我正在尝试

1 个答案: