2

现在形成我在 twitter bootstrap 选项卡的纪录片中看到的a href内容，指向带有选项卡内容的特定 ID，像这样

<ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#info">Information</a>
        </li>
        <li ><a href="#friends">Friends</a>
        </li>
</ul>

但是如果我想在选项卡中加载一个链接，像这样，我怎么能用 jquery 做到这一点？

<ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="http://www.mysite.com/info">Information</a>
        </li>
        <li ><a href="http://www.mysite.com/friends">Friends</a>
        </li>
</ul>

我也在这里使用了搜索，但没有幸运地找到我需要的东西......也许如果有人有适当的链接，我会很感激它回答我的问题:)

4

3 回答 3

1

如果您计划加载特定链接并且没有在站点中嵌入完整内容，只需在服务器端执行此操作并通过将类设置为活动来生成每个选项卡的适当 html。剩下的只是css

看看这个：https ://github.com/twitter/bootstrap/issues/814

如果您打算将标签转到另一个站点（不是服务器），那么我会让服务器生成一个无缝的 iframe 引用该站点

于 2012-07-05T13:50:21.150 回答
1

对于将外部链接的内容延迟加载到选项卡中，单击选项卡时，请使用我的插件。

https://github.com/mesuttalebi/MT.BootstrapTabsLazyloader.js

https://www.nuget.org/packages/MT.BootstrapTabsLazyLoader.js/

该软件包为引导选项卡添加了延迟加载选项，因此每个选项卡的内容都会在用户单击时加载。

1- 在 jquery.js 和 bootstrap.js 之后，将 /Scripts/MT.BootstrapTabsLazyLoader.js 的引用添加到代码的脚本部分

2-将类 .lazyload 添加到导航选项卡（引导选项卡 ul 标记）

3-将 data-url 添加到要延迟加载的每个选项卡的锚标记中。此属性将包含您要将其加载到选项卡中的部分页面的 url。例子

<!-- Nav tabs -->
<ul class="nav nav-tabs lazyload">
    <li class="active"><a href="#fullDesc" data-toggle="tab">Description</a></li>
    <li><a href="#specificationDetails" data-toggle="tab">Specifications</a></li>
    <li><a href="#relatedProducts" data-toggle="tab" data-url="@Url.Action("relatedproducts", new { model.product.id})">Related Products</a></li>
    <li><a href="#files" data-toggle="tab" data-url="@Url.Action("getproductfiles", new { model.product.id })">Product Files</a></li>
    <li><a href="#videos" data-toggle="tab" data-url="@Url.Action("getproductvideos", new { model.product.id })">Product Videos</a></li>
</ul>

更新：此包已更新，使用当前链接：

https://github.com/mesuttalebi/MT.BootstrapLazyloader.js

https://www.nuget.org/packages/MT.BootstrapLazyLoader.js/

于 2015-06-16T07:05:12.157 回答
0

您可能对我的示例感兴趣，关于如何将外部源中的内容“延迟加载”到 Twitter Boostrap 选项卡中。

小提琴在这里：http: //jsfiddle.net/technotarek/YbT7r/

代码如下所示：

$('#myTabs').bind('show', function(e) {  
    paneID = $(e.target).attr('href');
    src = $(paneID).attr('data-src');
    // if the iframe hasn't already been loaded once
    if($(paneID+" iframe").attr("src")=="")
    {
        $(paneID+" iframe").attr("src",src);
    }
});
于 2013-02-28T18:49:48.747 回答