0

メインページのmakeタブにidtabs jsを使用しています。

http://www.sunsean.com/idTabs/

各タブに 12 個の画像を配置します。ページの読み込みが最初にタブの div を読み込み、ヘッダーとメニューの画像が最初に読み込まれないとき。そのため、ページの読み込みが完了するまで 4 分待ちます。

読み込みページで最初にメイン画像を読み込み、次にデフォルトのタブ読み込み画像を読み込み、読み込まれたタブで他のタブ画像を選択すると???

<div id="tabs" dir="rtl">
<ul class="tabNavigation">
<li><a href="#topdownload" style="font:12px tahoma;">top</a></li>
  <li><a href="#featured" style="font:12px tahoma">more</a></li>
<li><a href="#toprated" style="font:12px tahoma">defult</a></li> 
<li><a href="#latest" style="font:12px tahoma;" >free</a></li>
</ul> 
</div>
4

2 に答える 2

1

オンデマンドでダウンロードする img タグの src プロパティに画像を動的に割り当てることで、これを実現できます。

tabs = document.querySelector('#tabs a');
tabs[0].onclick = function(){anyImgTag.src = "images/someimage.jpeg"};
于 2012-12-03T08:38:11.637 に答える
1

使用しているプラ​​グインは非常に基本的なもので、ajax リクエストを許可していないようです。

1 つの解決策は、外部 html ファイル (featured.htm、toprated.html...) に load メソッドを使用することですが、サーバーへの ajax リクエストと preload プラグインを使用するより良い方法があると確信しています。

HTML

<html>
  <head>
   ...
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
  </head>
  <body>
    ...
    <!-- tabs -->
    <ul class="css-tabs">
       <li><a href="topdownload.htm">top</a></li>
       <li><a href="featured.htm">more</a></li>
       <li><a class="selected" href="toprated.htm">default</a></li>
       <li><a href="latest.htm">free</a></li>
    </ul>

    <!-- single pane. it is always visible -->
    <div class="css-panes">
      <div style="display:block">
        <!-- loaded content here -->
      </div>
    </div>

Jクエリ

hrefここで、ajax を使用して、link 要素の取得する load メソッドを使用して外部ページをロードします。

<script>
    $(function() {
       $("ul.css-tabs").tabs("div.css-panes > div", {
            effect: 'fade',
            onBeforeClick: function(event, i) {
            // get the pane to be opened
            var pane = this.getPanes().eq(i);
                // only load once. remove the if ( ... ){ } clause if
                // you want the page to be loaded every time
            if (pane.is(":empty")) {
                // load it with a page specified in the tab's href
                // attribute
                pane.load(this.getTabs().eq(i).attr("href"));
            }
            }
        });
    });
</script>

デモ

http://jquerytools.org/demos/tabs/ajax-noeffect.htm

于 2012-12-03T08:26:37.240 に答える