4

jQuery newb と最初のポスター。優しくしてください:-) 検索しても答えが見つかりませんが、本当に簡単な解決策があると確信しています。

誰かが私を助けてくれることを願っています。これが私が達成しようとしていることです: 私はタブの行を持っています. 最初のタブのコンテンツはデフォルトで読み込まれます。外部ファイルからではなく、既にページにある div から読み込まれますが、SEO の理由からコードのさらに下にあります。

他のタブをクリックすると、コンテンツが外部ページから div にロードされますが、その後タブ 1 に戻りたい場合、そのコンテンツは load() からのコンテンツに置き換えられているため、つまり DOM に存在しなくなっているため使用できません。

load() を呼び出す前に #temp div に appendTo を追加し、タブ 1 のリンクがクリックされた場合に再度追加できると思いますが、もっと洗練された解決策が必要ですか?

これまでのコードは次のとおりです。

$(document).ready(function(){

    // default tab1 content div appended to containing div OK
    $("#innerDiv1").appendTo("#outerDiv");

    // tab2 link loads page2.html OK
    $("#link2").click(function(){
        $("#outerDiv").load("page2.html");
    });

    // This doesn't work as it's no longer in the DOM after #link2 clicked.
    $("#link1").click(function(){
        $("#innerDiv1").appendTo("#outerDiv");
    });

});

どんな考えや返信も大歓迎です。

よろしくお願いします M

4

4 に答える 4

2

ほとんどのタブ システムには、タブごとに個別のコンテンツ コンテナーがあります。タブをクリックすると、表示されているコンテンツが非表示になり、現在クリックされているタブに関連付けられている非表示のコンテンツが表示されます。あなたがしているのは毎回htmlを一掃することだけのように思えますが、これはより多くのコーディング作業を必要とします.

jQuerUI のようなより堅牢なタブ システムには、必要なものの多くを効率化するための ajax オプションが統合されています。あなたはこれが初めてだと言っているので... jQueryUIなどの優れたサポートも提供するソリューションを使用する価値があります

http://jqueryui.com/demos/tabs/

于 2012-03-06T17:16:18.040 に答える
1

jQuery タブ ウィジェットを試すことができます: http://jqueryui.com/demos/tabs/

タブ付きのインターフェイスを簡単に作成できるはずです。すべてのコンテンツを一度に含めるか、AJAX 経由でロードすることができます。これは柔軟なウィジェットです。

于 2012-03-06T17:16:33.803 に答える
0

各タブの各 #outerDiv の内容をどこかに保存します。jQuery の data methodを使用できます。または、タブごとに .outerDiv を作成し、最初にコンテンツをロードしてから、アクティブなタブの .outerDiv のみを表示し、残りを非表示にします。

于 2012-03-06T17:15:46.880 に答える
0

クリック ハンドラーを次のように変更し#link1ます。

$("#link1").click(function() {
   $("#outerDiv").load('originalurl.html #innerDiv1');
});

これは AJAX を使用して最初のページを読み込みますが、「#innerDiv1」セクションのみを取得し、コンテンツを#outerdivそれに置き換えます。originalurl.htmlを実際の URLに置き換える必要があります...location.hrefブックマーク用に更新しない限り、おそらく使用できますか?

于 2012-03-06T17:16:55.237 に答える