如何使用引导选项卡使用AJAX加载？
我使用了bootstrap-tabs.js，它工作完美。
但是我没有find关于如何通过AJAX请求加载内容的信息。
那么，如何使用bootstrap-tabs.js加载AJAX？
您可以在事件处理程序中监听change事件和ajax加载内容
$('.tabs').bind('change', function (e) { var now_tab = e.target // activated tab // get the div's id var divid = $(now_tab).attr('href').substr(1); $.getJSON('xxx.php').success(function(data){ $("#"+divid).text(data.msg); }); })
在Bootstrap 2.0中，您必须绑定到“show”事件。
这里是一个HTML和JavaScript的例子：
<div class="tabbable"> <ul class="nav nav-tabs" id="myTabs"> <li><a href="#home" class="active" data-toggle="tab">Home</a></li> <li><a href="#foo" data-toggle="tab">Foo</a></li> <li><a href="#bar" data-toggle="tab">Bar</li> </ul> <div> <div class="tab-pane active" id="home"></div> <div class="tab-pane" id="foo"></div> <div class="tab-pane" id="bar"></div> </div> </div>
JavaScript的：
$(function() { var baseURL = 'http://yourdomain.com/ajax/'; //load content for first tab and initialize $('#myads').load(baseURL+'home', function() { $('#myTab').tab(); //initialize tabs }); $('#myTab').bind('show', function(e) { var pattern=/#.+/gi //use regex to get anchor(==selector) var contentID = e.target.toString().match(pattern)[0]; //get anchor //load content for selected tab $(contentID).load(baseURL+contentID.replace('#',''), function(){ $('#myTab').tab(); //reinitialize tabs }); }); });
我在这里写了一篇关于它的文章： http : //www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-ajax-load-content/
我想通过Ajax将完全dynamic的php页面加载到标签中。 例如，我想在链接中使用$ _GET值（基于哪个选项卡） – 如果您的选项卡是dynamic的，则基于数据库数据，这非常有用。 找不到任何与它一起工作，但我确实设法写一些实际上工作，并做我正在寻找的jQuery。 我是一个完整的jQuery noob，但这是我做到了这一点。
- 我创build了一个名为tabajax（而不是tab）的新的“数据切换”选项，这允许我分离什么是ajax和什么是静态内容。
- 我创build了一个基于该数据切换的jQuery代码片段，它不会混淆原始代码。
我现在可以加载说url.php？值= X到我的引导选项卡。
随意使用它，如果你想，代码是在下面
jQuery代码：
$('[data-toggle="taba"]').click(function(e) { e.preventDefault() var loadurl = $(this).attr('href') var targ = $(this).attr('data-target') $.get(loadurl, function(data) { $(targ).html(data) }); $(this).tab('show') });
HTML：
<li><a href="tabs/loadme.php?value=1" data-target='#val1' data-toggle="tabajax">Val 1</a></li>
所以在这里你可以看到我已经改变了bootstrap加载的方式，我使用href作为dynamicajaxlink，然后添加一个'data-target'值到链接，而应该是你的目标div（tab-content） 。
所以在你的标签内容部分，你应该为这个例子创build一个名为val1的空div。
空Div（目标）：
<div class='tab-pane' id='val1'><!-- Ajax content will be loaded here--></div>
希望这对某个人有用:)
我build议把uri放到tab-pane元素中，它可以利用web框架的反向urlfunction。 它也允许完全依赖于标记
<ul class="nav nav-tabs" id="ajax_tabs"> <li class="active"><a data-toggle="tab" href="#ajax_login">Login</a></li> <li><a data-toggle="tab" href="#ajax_registration">Registration</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="ajax_login" data-target="{% url common.views.ajax_login %}"></div> <div class="tab-pane" id="ajax_registration" data-target="{% url common.views.ajax_registration %}"></div> </div>
这里是JavaScript
function show_tab(tab) { if (!tab.html()) { tab.load(tab.attr('data-target')); } } function init_tabs() { show_tab($('.tab-pane.active')); $('a[data-toggle="tab"]').on('show', function(e) { tab = $('#' + $(e.target).attr('href').substr(1)); show_tab(tab); }); } $(function () { init_tabs(); });
我加载活动选项卡，并只加载一个选项卡，如果它尚未加载
代码user1177811中有错误。
它必须是$('[data-toggle="tabajax"]') 。
还有改进的余地。 .load（）方法与$ .get（）不同，允许我们指定要插入的远程文档的一部分。 所以我加了#content来加载远程页面的内容div。
$this.tab('show'); 现在只有在响应成功时才被调用。
这是代码
$('[data-toggle="tabajax"]').click(function(e) { e.preventDefault(); $this = $(this); var loadurl = $(this).attr('href'); var targ = $(this).attr('data-target'); $(targ).load(loadurl+'?ajax=true #content', function(){ $this.tab('show'); }); });
这是我怎么做的。 我使用一个属性data-href来保存我想要加载的url。 这将不会重新加载已经加载的数据，除非你设置$('#tab').data('loaded'); 为0或删除它。 它还通过检测第一个斜杠的位置处理相对与绝对URL。 我不确定与所有浏览器的兼容性，但它适用于我们的情况，并允许我们正在寻找的function。
使用Javascript：
//Ajax tabs $('.nav-tabs a[data-href][data-toggle="tab"]').on('show', function(e) { var $this = $(this); if ($this.data('loaded') != 1) { var firstSlash = $this.attr('data-href').indexOf('/'); var url = ''; if (firstSlash !== 0) url = window.location.href + '/' + $this.attr('data-href'); else url = $this.attr('data-href'); //Load the page $($this.attr('href')).load(url, function(data) { $this.data('loaded', 1); }); } });
HTML：
<div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"> <a href="#js-tab1" data-href="tab1.php" data-toggle="tab">Tab 1</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="js-tab1"> <p> This content isn't used, but instead replaced with contents of tab1.php. </p> <p> You can put a loader image in here if you want </p> </div> </div> </div>
以下是我find的一个解决scheme，并进行了修改以满足我的需求：
$("#tabletabs").tab(); // initialize tabs $("#tabletabs").bind("show", function(e) { var contentID = $(e.target).attr("data-target"); var contentURL = $(e.target).attr("href"); if (typeof(contentURL) != 'undefined') { // Check if URL exists $(contentID).load(contentURL, function(){ $("#tabletabs").tab(); // reinitialize tabs }); } else { $(contentID).tab('show'); } }); $('#tabletabs a:first').tab("show"); // Load and display content for first tab });
这里是引导选项卡Ajax的例子，你可以使用它…
<ul class="nav nav-tabs tabs-up" id="friends"> <li><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li> <li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li> <li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="contacts"> </div> <div class="tab-pane" id="friends_list"> </div> <div class="tab-pane urlbox span8" id="awaiting_request"> </div> </div>
这里是AJAX调用
$('[data-toggle="tabajax"]').click(function(e) { var $this = $(this), loadurl = $this.attr('href'), targ = $this.attr('data-target'); $.get(loadurl, function(data) { $(targ).html(data); }); $this.tab('show'); return false; });
这是一个使用Razor的MVC示例。 它将与名为的两个部分视图交互： _SearchTab.cshtml和_SubmissionTab.cshtml
请注意，我将这些选项卡的id命名为partials。
标记：
<!-- Nav tabs --> <ul id="tabstrip" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#_SubmissionTab" role="tab" data-toggle="tab">Submission</a></li> <li><a href="#_SearchTab" role="tab" data-toggle="tab">Search</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="_SubmissionTab">@Html.Partial("_SubmissionTab")</div> <div class="tab-pane fade" id="_SearchTab"></div> </div>
@Html.Partial将在页面加载中请求活动选项卡上的页面
脚本：
<script> $('#tabstrip a').click(function (e) { e.preventDefault() var tabID = $(this).attr("href").substr(1); $("#" + tabID).load("/@ViewContext.RouteData.Values["controller"]/" + tabID) $(this).tab('show') }) </script>
load函数将在每个选项卡被点击时执行一个ajax请求。 至于要求什么path，你会注意到@ViewContext.RouteData.Values["controller"]调用。 它只是获取当前视图的控制器，假设部分视图位于那里。
控制器：
public ActionResult _SubmissionTab() { return PartialView(); } public ActionResult _SearchTab() { return PartialView(); }
需要控制器将load请求转发到正确的局部视图。
我使用这个函数，这真的很好，因为她阻止你再次加载ajax时，返回到该选项卡。
提示：在选项卡href上，只需放置目标。 将此添加到页脚：
$("#templates_tabs").tabs({ beforeLoad: function( event, ui ) { if (ui.tab.data("loaded")) { event.preventDefault(); return; } ui.ajaxSettings.cache = false, ui.jqXHR.success(function() { ui.tab.data( "loaded", true ); }), ui.jqXHR.error(function () { ui.panel.html( "Not possible to load. Are you connected?"); }); } });
