Question

是否可以使用bootstrap 3远程加载选项卡？如果是这样，是否可以远程加载网站的某个部分（通过ID标签）？如果是这样，如何使用bootstrap 3选项卡完成此操作？我尝试了几种方法，它们根本不起作用。谢谢！

这是我到目前为止所得到的。当我单击ajax选项卡时，它只会加载到新页面上。我希望它从该页面加载某个内容。基本上，我想要做的是从远程页面加载#tabkarma内的内容，通过标签加载到当前网页。但到目前为止，它还没有起作用。

JS

  <script type="text/javascript">
$('[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;
});
</script>

HTML

  <div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs text-center" role="tablist" id="myTabs">
    <li role="presentation" class="active"><a href="#about" role="tab" data-toggle="tab">About Me</a></li>
    <li role="presentation"><a href="#content" role="tab" data-toggle="tab">Content</a></li>
    <li role="presentation"><a href="#activity" role="tab" data-toggle="tab">Activity</a></li>
    <li role="presentation"><a href="#followers" role="tab" data-toggle="tab">Followers</a></li>
    <li role="presentation"><a href="/b/reputation.php?uid=4" data-target="#tabkarma" data-toggle="tabajax" id="tabkarma">Karma</a></li>
    <li role="presentation"><a href="#achievements" role="tab" data-toggle="tab">Achievements</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="about">...</div>
    <div role="tabpanel" class="tab-pane" id="content">...</div>
    <div role="tabpanel" class="tab-pane" id="activity">...</div>
    <div role="tabpanel" class="tab-pane" id="followers">...</div>
    <div role="tabpanel" class="tab-pane" id="tabkarma">Loading</div>
    <div role="tabpanel" class="tab-pane" id="achievements">...</div>
  </div>

</div>

Answer 1

首先请注意，从链接中删除id="tabkarma"，因为它与实际标签冲突。

现在，如果您只想从页面加载特定部分，则应使用.load()。来自文档：

与$ .get（）不同，.load（）方法允许我们指定一部分要插入的远程文档。这是通过特殊的方式实现的 url参数的语法。如果有一个或多个空格字符包含在字符串中，第一个字符串后面的字符串部分假设space是一个确定内容的jQuery选择器要加载。

所以脚本看起来像这样：

$('[data-toggle="tabajax"]').click(function (e) {
    var $this = $(this),
        loadurl = $this.attr('href'),
        targ = $this.attr('data-target');

    //Add the selector of the element you want to fetch from the external page to the url (with a blank space in between)
    $(targ).load(loadurl + " #loadthis", function () {
        $this.tab('show');
    });

    return false;
});

这是 demo fiddle

请注意，每次点击链接时都会进行ajax调用，您可能只想添加一次检查。

Answer 2

你应该能够做到......

<强> HTML

<div role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"> <a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-url="url-to-home"><!-- make sure you update the data-url for this page -->
                Home
            </a>
        </li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" data-url="url-to-profile"><!-- make sure you update the data-url for this page -->
            Profile</a>

        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">home</div>
        <div role="tabpanel" class="tab-pane" id="profile">profile</div>
    </div>
</div>

<强> JS

$('.nav 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 + " #tabkarma", function (result) {
        pane.tab('show');
    });
});

Answer 3

我将如何通过隐藏的DOM元素来解决这个问题。

例如，在目标网站内，有一些东西沿着

行

<div id="tabkarma"></div>

其中就是你想要的内容。你可以通过jQuery的ajax加载它，所以：

$.ajax({
    type: "GET",
    url: "http://targetsite.com/whatever",
    data:{}
}).done(function(msg){
    $("#hiddendiv").html(msg);
});

这方面的诀窍是#hiddendiv引用了一些类似于display: none;的div。这会强制浏览器为加载的内容构建DOM级别对象，但不显示它。然后，它是一个简单的jQuery调用，用于将目标内容加载到实际标签中：

$("#tabajax").html($("#tabkarma").html());

其中只是说＆＃34;将#tabkarma内的所有HTML代码放入#tabajax＆＃34;。

有一点需要注意：大多数服务器不支持跨源AJAX请求：也就是说，如果您从mycoolurl.com调用此代码并且它引用somethingcool.com处的代码，则默认情况下会阻止它，但是有一些方法可以配置您的Web服务器以阻止这种情况，或者仅使用http://www.whateverorigin.org/之类的东西。

使用带ID的bootstrap 3远程加载选项卡

3 个答案: