ajax - 如何在 Bootstrap 选项卡中使用 AJAX 加载？

Question

我使用了 bootstrap-tabs.js，它运行良好。

但是我没有找到有关如何通过 AJAX 请求加载内容的信息。

那么，如何通过 bootstrap-tabs.js 使用 AJAX 加载？

Answer 1

在 Bootstrap 2.0 及更高版本中，您必须绑定(bind)到“显示”事件。

这是一个 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
    $('#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/