我使用了bootstrap-tabs.js,它运行得很好.
但我没有找到有关如何通过AJAX请求加载内容的信息.
那么,如何使用bootstrap-tabs.js加载AJAX?
在Bootstrap 2.0及更高版本中,您必须绑定到"show"事件.
这是HTML和JavaScript的示例:
JavaScript的:
$(function() { var baseURL = 'http://yourdomain.com/ajax/'; //load content for first tab and initialize $('#home').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/
您可以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); }); })