如何在MVC中按需加载选项卡内容？
如何在MVC中按需加载选项卡内容？
提问于 2016-02-02 21:36:23
我使用引导选项卡来创建选项卡。但是，当我单击菜单选项时，TabStrip会加载所有选项卡数据。我想加载我的Tab条数据时，我点击它。
下面是我使用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>
当我单击不同选项卡的内容时，如何加载该选项卡的内容？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-02 22:28:58
当用户单击选项卡链接时，可以使用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>在您的document中，将这些链接上的单击事件注册到我们的新css类中，当单击时，读取data-url属性值，使用jQuery加载方法将数据加载到相应的选项卡内容div。
$(function () {
$("a.ajaxTabs").click(function (e) {
e.preventDefault();
var u = $(this).data("url");
var targetItem = $(this).attr("href");
$(targetItem).load(u);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35164228
复制相关文章
相似问题
腾讯云开发者
