2

こんにちは、いくつかのボタンがあります。最初のボタンは表示/非表示で、最初にクリックすると正しく機能します。2 つ目は次のテーブルで、次のテーブルをクリックすると、テーブル 1 が非表示になり、テーブル 2 のみが表示されます。次に、非表示ボタンをクリックすると、テーブル 1 とテーブル 2 の両方が非表示になり、非表示ボタンがクリックしました。これが私の問題とコードの例です: http://jsfiddle.net/zfnx6/27/

4

5 に答える 5

1

あなたが説明したように動作するようにコードを更新しました。最大の変更は、外側のテーブルを table1 と table2 のコンテナーとして定義することでした。そうすれば、上部のボタン (表示/非表示) をクリックすると、両方のテーブルの if ステートメントをいじる必要がなく、一度に両方のテーブルに影響します。

HTML のボタンで変更されたパラメータがいくつかあり、2 番目のボタンは両方のテーブルのトグルになりました。3 つ以上のテーブルを使用する場合、現在のアプローチはあまり効果的ではありません。

デモ http://jsfiddle.net/zfnx6/41/

于 2012-06-09T19:09:37.047 に答える
0

jquery ui accordianを見てください。

一度に 1 つのテーブルのみを表示する場合は、これを使用することを検討してください。

あなたのフィドルでは、jqueryを使用していません。jquery での要素の表示と非表示は非常に簡単で、コードを大幅に削減できます。

于 2012-06-09T19:04:22.133 に答える
0

jQuery の使用に興味がある場合は、コードが大幅にクリーンアップされます。例を次に示します: http://jsfiddle.net/zfnx6/43/

于 2012-06-09T19:15:11.670 に答える
0

私自身のバリエーション: http://jsfiddle.net/zb9Tt/

HTML にいくつか変更を加えましたが、ほとんどは JavaScript に関するものです。toggleable以下は、ページ上のオブジェクトの無制限のグループに対して必要なことを実行する、非常に軽い jQuery です。このactiveクラスは、現在選択されている「タブ」を表示するために使用されます。

 (function ($) {

    $(document).ready(function () {
        $("#togglebutton").bind("click", function () {
           $(".active, #nextbt").toggle();
        });

        $("#nextbt").bind("click", function () {
            var current = $(".active"); 
            var next = $(".active + .toggleable");

            if (next.length) {
                current.removeClass("active").hide();
                next.addClass("active").show();
            }
        });    
    });    
})(jQuery);
于 2012-06-09T19:57:16.767 に答える