当前位置:  开发笔记 > 编程语言 > 正文

如何使用Bootstrap选项卡加载AJAX?

如何解决《如何使用Bootstrap选项卡加载AJAX?》经验,为你挑选了4个好方法。

我使用了bootstrap-tabs.js,它运行得很好.

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

那么,如何使用bootstrap-tabs.js加载AJAX?



1> Owen..:

在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/



2> ukessi..:

您可以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);
    });
})


您的示例示例已经死了,仅供参考
根据[jQuery docs](http://api.jquery.com/change/):"更改事件在其值发生变化时发送给元素.此事件仅限于元素,
地之南_816
这个屌丝很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有