使用带有 ID 的引导程序 3 远程加载选项卡

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

我将如何通过隐藏的 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());

这只是说“将#tabkarma中的所有HTML代码放入#tabajax中”。

需要注意的一点：大多数服务器不支持跨域 AJAX 请求：也就是说，如果您从 mycoolurl.com 调用此代码并且它引用了 somethingcool.com 的代码，它将默认被阻止，但有一些方法可以将您的网络服务器配置为不阻止此操作，或者仅使用 http://www.whateverorigin.org/ 之类的内容。

Answer 2

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

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

.load() 方法与 $.get() 不同，它允许我们指定一部分 要插入的远程文档。这是通过特殊的 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 3

你应该可以做到的......

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');
    });
});