0

jQuery uiタブを使用して3つのタブがあり、最初に表示できるタブは1つだけです。そのため、ほとんどの訪問者はわざわざ他の 2 つのタブを開くことはないと思います。私の質問は、ブラウザが画像のみをロードしないようにするにはどうすればよいですか? 特定のタブがクリックされたときにのみロードします。

4

3 に答える 3

3

jQuery UI を使用すると、タブに URL を使用できます。そのコンテンツは、クリックしたときにのみ読み込まれます。ドキュメントを見る

于 2013-03-03T18:06:53.430 に答える
1

目標を達成するには、2 つの選択肢があります。

  1. タブに URL を設定し、コンテンツを他のページに配置します。次に、ユーザーがタブをクリックすると、jQuery UI は ajax によってコンテンツをロードします。jQuery UI ajax docを参照してください。
  2. いくつかのトリックを使用して画像をロードできます。トリックは、パネルがアクティブになったときに画像の src を設定することです。最初に presrc 属性として src を置き、タブがアクティブになったら presrc をコピーして src に設定します。

jsFiddle のコード例: http://jsfiddle.net/4WYCC/1/

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <p>Test tab</p>
    </div>
    <div id="tabs-2">
        <img presrc="https://www.google.com.hk/logos/2013/miriam_makebas_81st_birthday-1417005-hp.jpg" />
    </div>
</div>

JavaScript

$(function() {
  $( "#tabs" ).tabs({
      beforeActivate: function( event, ui ) {
          $("img",ui.newPanel).each(function(){
              if(!this.src)
              {
                  this.src = $(this).attr("presrc");
              }
          });
      }
  });
});

第二選択のコツはコツですが、第一選択を使うことをお勧めします。

于 2013-03-03T18:32:01.927 に答える
1

この回答は、@ user1737909 のソリューションに代わるものです。前述のように、タブ コンテンツを含む新しい HTML ページは、タブが押されたときにのみ作成および取得できます。新しいページを作成する代わりの方法は次のとおりです。

tab2 に関連付けられた HTML:

  <div id="tabs-2">
     <img id="img2" src="" alt="image description" />
  </div>

jQuery:

$('#tabs').bind('tabsselect', function (event, ui) {
  switch (ui.index) { //index=1 is tab-2
    case 1:
       $("#img2").attr("src","link2image2");
    case 2:
       $("#img3").attr("src","link2image3");
  ...
  }

});

HTH

于 2013-03-03T18:40:43.923 に答える