Question

我正在使用bootstrap tabstrip来创建标签。但是，当我单击菜单选项时，TabStrip会加载所有选项卡数据。我想点击它时加载我的Tab Strip数据。

下面是我使用Bootstrap创建标签条的代码：

             <div class="container-fluid">
<ul id="tabstrip" class="nav nav-tabs content-tabs" role="tablist">

    <li class="active"><a href="#OverView" role="tab" data-toggle="tab"><strong>Overview</strong></a></li>
    <li role="presentation"><a href="#NodeView" role="tab" data-toggle="tab"><strong>Node</strong></a></li>
    <li role="presentation"><a href="#ConnectView" role="tab" data-toggle="tab"><strong>Connect</strong></a></li>

</ul>

<div class="tab-content">

    <div class="tab-pane fade" id="OverView">@Html.Action("Overview")</div>
    <div class="tab-pane fade" id="NodeView">@Html.Action("Node")</div>
    <div class="tab-pane fade" id="ConnectView">@Html.Action("Connect")</div>

</div>

点击该标签后，如何加载不同标签的内容？

Answer 1

当用户点击标签链接时，您可以使用ajax加载标签内容。

因此，更新您的标记，以便链接将具有css类和html5数据属性，我们将存储部分视图的URL，以便在用户单击时加载。我们将使用css类作为我们的jQuery选择器来注册这种行为。

<div class="container-fluid">
    <ul id="tabstrip" class="nav nav-tabs content-tabs" role="tablist">

        <li class="active">
         <a href="#OverView" role="tab" class="ajaxTabs" data-url="@Url.Action("Overview")" data-toggle="tab"><strong>Overview</strong></a></li>
        <li role="presentation"><a href="#NodeView" role="tab" class="ajaxTabs" data-url="@Url.Action("Node")" data-toggle="tab"><strong>Node</strong></a></li>
        <li role="presentation"><a href="#ConnectView" role="tab" class="ajaxTabs" data-url="@Url.Action("Connect")" data-toggle="tab"><strong>Connect</strong></a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade" id="OverView"></div>
        <div class="tab-pane fade" id="NodeView"></div>
        <div class="tab-pane fade" id="ConnectView"></div>

    </div>
</div>

在您的文档就绪事件中，使用我们的新css类在这些链接上注册click事件，单击时，读取data-url属性值，使用jQuery load方法将数据加载到相应的tab内容div。 / p>

$(function () {

    $("a.ajaxTabs").click(function (e) {
        e.preventDefault();
        var u = $(this).data("url");
        var targetItem = $(this).attr("href");
        $(targetItem).load(u);
    });

});

如何在MVC中按需加载标签页内容

1 个答案: