使用AJAX打开引导选项卡

时间:2015-02-15 14:38:42

标签: javascript ajax twitter-bootstrap

我想打开引导标签并立即显示每个标签内的href页面。我在下面有这个小代码,但它不输出任何页面。

HTML

<div id="tabs">
    <ul class="nav nav-tabs" id="prodTabs">
        <li class="active"><a href="#tab_basic" data-url="http://localhost/bioinformatica/stuff/pagina.html">Basic</a></li>
        <li><a href="#tab_images" data-url="httpt://localhost/bioinformatica/stuff/pagina.html">pagina</a></li>
        <li><a href="#tab_videos" data-url="www.facebook.com">FB</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab_basic" class="tab-pane active"></div>
        <div id="tab_images" class="tab-pane active"></div>
        <div id="tab_videos" class="tab-pane active"></div>
    </div>
</div>

的Javascript

$('#tabs a').click(function (e) {
    e.preventDefault();

    var url = $(this).attr("data-url");
    var href = this.hash;  
    var pane = $(this);

    // ajax load from data-url

    $(href).load(url,function(result){      
        pane.tab('show');
    });
});

// load first tab content
$('#tab_basic').load($('.active a').attr("data-url"),function(result){
  $('.active a').tab('show');
});

1 个答案:

答案 0 :(得分:1)

您需要在http://中添加data-url,否则代码会将域名附加到已运行的域中。

此外,即使在预先http://之后,由于Cross Domain Request,它也不会起作用。不要担心您的代码没问题,只是http://google.com不允许任何其他代码向其发出AJAX请求。

只需使用本地server上已存在的某个文件进行尝试。