0

http://www.barelyfitz.com/projects/tabber/に示されている tabber スクリプトを使用して、タブ付きページを提供します。一般的にはうまく機能しますが、私の唯一の不満は、コンテンツが完全に読み込まれるまでタブが表示されず、画面が適切に書き込まれるときにジャンプすることです. (私が言いたいことの例については、www.littlehotels.co.uk/spain/noves.phpを参照してください。)

解決策は、このようなすべてのタブ付きコンテンツを含む div を非表示にすることだと思いました

<div class="tabber" id="tabber" style="display:none">

そして、によって呼び出される小さなjavascript関数でそれを明らかにします

<body onLoad="ShowTabber()">

JavaScript自体は

<script type="text/javascript">
function ShowTabber() {
document.getElementById('tabber').style.display = "block";
 }
</script>

私の小さな関数は、外部の javascript (tabber.js) の動作を停止しているように見えます。これは、ページがすべてのタブのコンテンツを一列に表示し、タブ自体が上部にないためです。これは、ページの から外部スクリプトへの参照を削除した場合と同じ結果です。

私は何を間違っていますか?

詳細説明: tabber.js ファイルが見つからない場合、ページにはすべてのタブのコンテンツが順番に表示されます (ご想像のとおり)。上記で説明したようにスクリプトを実行すると、まったく同じ効果があります。したがって、スクリプトがメインの JavaScript の実行をブロックしていると結論付けています。

4

2 に答える 2

0

さて、私はjQueryで問題(一種)を解決しましたが、今では別の問題が発生しています。

PSRに応えて、私はjQueryをより深く調べました。.tabs()に切り替えるのは複雑すぎたでしょうが、私はjQueryを使用して、適切なタイミングでいくつかのdivを表示および非表示にしました。

tabber divの前に簡単な小さな線を配置して、「Loading」メッセージを表示しました。

<div id="loading" align="center" style="position:relative;top:70px"><h6>Loading ...</h6></div>

次に、このスクリプトをjQuery行の下のヘッドに配置します。

<script type="text/javascript">
    $(document).ready(function(){
        $("#tabber").hide();
        $("#loading").hide();
        $("#loading").fadeIn(1000);
     });
    $(window).load(function(){
        $("#loading").hide();
        $("#tabber").fadeIn(300);
     });
function checkResize(id){
      var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
      alert(win);
}
</script> 

これは問題なく機能しますが、いくつかのタブにはコンテンツ用のiframeがあり、このスクリプトは、これらのiframeで使用しているautoResizeスクリプトを壊します。新しい質問を開いて、誰かがそれに対する答えを持っているかどうかを確認します。

于 2013-03-19T17:58:12.403 に答える
0
'onLoad': function(argsObj) {
    /* Display an alert only after tab */
    if (argsObj.tabber.id == 'tab') {
      alert('Finished loading tab!');
    }
  }

デフォルトでは、タブを選択します。その後、そのタブの読み込みが完了すると、メッセージが表示されます。

ここを参照

于 2013-03-18T12:35:36.513 に答える