Question

现在形成我在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>

我也在这里使用搜索但是没有找到我需要的东西...也许如果有人有合适的链接我会很感激它回答我的问题：）

Answer 1

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

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

如果您计划选择其他网站（而不是服务器），那么我会让服务器生成一个引用该网站的无缝iframe

Answer 2

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

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添加到nav-tabs（引导标签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/

Answer 3

您可能会对我如何将来自外部源的内容“延迟加载”到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);
    }
});

twitter bootstrap标签：加载链接

3 个答案: