2

今、私がツイッターのブートストラップタブのドキュメンタリーで見たものを形成し、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を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/

于 2015-06-16T07:05:12.157 に答える
0

外部ソースからTwitterBoostrapタブにコンテンツを「遅延ロード」する方法の私のサンプルに興味があるかもしれません。

フィドルはここにあります：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 に答える