2

サーバー側で処理されたファイルに関する情報を取得して表示することになっている Web アプリに取り組んでいます。サーバーから返されたデータを、処理された各ファイルのタブに表示しようとしています。

私がやっていることは、タブのコンテナーとして機能する div を作成し、タブ リンクの空の ul を使用することです。

<div id="fileInfo"><ul id="infoTabs"></ul></div>

データを受け取ったら、まず新しい

  • 各ファイルの私のulに：

    <li>

    file1 の情報

    • そして、各ファイルの fileInfo div 内に新しい div を追加します。

    <div id="file1">
Info for file1
<br>
<ul>
<li>
Blah blah
<br>
blah blah blah
</li>
</ul>
</div>

    すべてのコンテンツを入力したら、tabs 関数を呼び出します。

    $("#fileInfo").tabs();

    複数のファイルがある場合は、各ファイルのタブ ヘッダーを含むタブ フォームがありますが、ファイル情報を含む div のすべてのコンテンツは最初のタブにあります。他のタブのタブ ヘッダーをクリックすると、ドキュメントは、独自のタブにあるはずの div が表示されている最初のタブの部分にジャンプします。Firebug の HTML タブを調べたところ、タブが正しく表示されるように、すべてがドキュメントに正しく入力されているように思えます。

        <div id="fileInfo" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="infoTabs" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#file1">Info for file1</a>
</li>
<li>
<a href="#file2">Info for file2</a>
</li>
</ul>
<div id="file1">
Info for file1
<br>
<ul>
<li>
file1, blah blah
<br>
yackity smackity
</li>
</ul>
</div>
<div id="file2">
Info for file2
<br>
<ul>
<li>
file2, blah blah
<br>
yackity smackity
</li>
</ul>
</div>
</div>

    私は今ちょっと立ち往生しています。私が見逃している可能性のあるものに関する情報は大歓迎です。

    4

    1 に答える 1

    1

    アプローチを変えることで問題を解決しました。ダミーのタブでタブ div を作成して削除し、タブ div を非表示にしました。

    $("#fileInfo").tabs();
        $("#fileInfo").tabs('remove', 0);
        $("#fileInfo").hide();

    その後、tabs add メソッドを呼び出し、ファイル情報 div を新しく作成したタブに追加します。

    tabs('add', '#'+ fileName, tabTitle);
 $('#'+ fileName).html(cont);
    于 2012-07-24T21:37:57.487 に答える