0

次のようなページがあります。

+ -------------------------------------------+
| | | |
| | +----------------------------+ +--------+ |
| | |メイン | |サイドバー | | |
| | | | | | |+-----+| | |
| | | | | | ||jquery|| | |
| | | | | | || タブ || タブ || | |
| | | | | | |+-----+| | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | +----------------------------+ +--------+ |
+ -------------------------------------------+

4つのタブを持つjQueryタブ要素があります。ページ全体で 4 つのタブすべてを同時に表示し、閉じるオプションを使用して元の状態に戻す 1 つのボタンが必要です。このようなもの：

+ -------------------------------------------+
| | | |
| | +------------------+ +------------------+ |
| | | | タブ 1 | | | タブ 2 | | |
| | | | | | | | | | | |
| | +------------------+ +------------------+ |
| | | |
| | +------------------+ +------------------+ |
| | | | タブ 3 | | | タブ 4 | | |
| | | | | | | | | | | |
| | +------------------+ +------------------+ |
| | 閉じる |
+ -------------------------------------------+

これを行う方法について何か考えはありますか？

4

1 に答える 1

0

私は最近似たようなことをしました。タブが DIV 要素であると仮定すると、ボタン呼び出しコードがこれらの行に沿って何かを実行します。

function expand(){
  $('div.tab').each(function(){ 
    $(this).show(); //Make sure all our tabs are visible
    $(this).removeClass('tab'); //Remove any sizing etc. previously applied to the tab by your stylesheet
    $(this).addClass('expandedtab'); //Apply class which sets proper size, floats left etc.
  }); 
}

次に、collapseによって実行された操作を元に戻すメソッドを作成しexpand、閉じるボタンにそれを呼び出させます。collapseが呼び出される前の状態について何かを知る必要がある場合expand(どのタブがアクティブだったかなど)、jQuery.data()expandメソッドを使用してこの情報を保存し、後で が取得できるようにします。collapse

注: 必要に応じて、「タブ」クラスを削除して「expandedtab」クラスを追加する代わりに、特定のスタイルを適用/オーバーライドしてexpand、スタイル属性をタブ DIV に追加し、属性をcollapse削除することができます。

于 2010-03-06T16:11:28.690 に答える