jQuery TIPS

jQueryでタブ切り替えをシンプルなスクリプトで実装するサンプル

2010年10月14日2012年5月3日 BlackFlag 26件のコメント jQuery、Navigation、タブ

業務でタブ切り替え動作の作成依頼があり、先日紹介した「jQueryでの連番要素を制御する方法」を利用して
タブ切り替え動作が実装できないか試したところ、意外とシンプルなSCRIPT構成で出来あがったので紹介してみます。

まずHTMLソースから。
※タブボタンは３つのパターンにしておきます。（いくつでも増やすことは可能）
※今回のサンプルは装飾なしでタブ切り替え動作のみのパターンにします。

[html]
◆HTML
≫MENU【１】
≫MENU【２】
≫MENU【３】

～MENU【１】クリックでオープンとなるタブエリア要素。～

～MENU【２】クリックでオープンとなるタブエリア要素。～

～MENU【３】クリックでオープンとなるタブエリア要素。～

[/html]

タブ切り替えのアクションを起こすボタン（リンク）に「class=”btn_act”」を付け、
アクティブ状態のタブについては「class=”active”」を付けます。

ボタンクリック後、表示する各エリアについては、
共通で「class=”motion”」を付けておき、
「id」はそれぞれ連番になるように「id=”motion_area1″」～「id=”motion_area3″」としておきます。
（これらのID名及びCLASS名はもちろん変更可能です。）

続いてCSS。

[css]
◆CSS
.motion {
width: 500px;
display: none;
}
#motion_area1 {
display: block;
}
a.active {
font-weight: bold;
background: #ddd;
}
[/css]

表示エリアに共通に指定した「class=”motion”」はひとまず「display:none」で非表示に。
１番目の表示エリアのみページロード時に展開させるため、「#motion_area1」のみ「display:block」に切り替えます。（ページロード時に全ての表示エリアを非表示にする場合はこの指定は必要ありません。）
アクティブタブ用の「class=”active”」は今回はとりあえず太字と背景色を付けています。

そしてSCRIPT。

[javascript]
◆SCRIPT
$(function(){
$(“a.btn_act”).click(function(){
var connectCont = $(“a.btn_act”).index(this);
var showCont = connectCont+1;
$(‘.motion’).css({display:’none’});
$(‘#motion_area’+(showCont)).slideDown(‘normal’);

$(‘a.btn_act’).removeClass(‘active’);
$(this).addClass(‘active’);
});
});
[/javascript]

ここのSCRIPT動作の詳しい説明は「jQueryでの連番要素を制御する方法」から。
今回の動作では、リンクタブがクリックされた際に、
自分のカウントナンバーと同じIDナンバーを持つエリアを
「slideDown」で表示に切り替えるのと併せて、自分に「class=”active”」を付加しています。

そして、これらを実際に動作させると以下のようになります。

SAMPLE［１］

リンクタブの数と表示エリアの数を比例させて、
表示非表示を切り替えているのでSCRIPTは変えずに、
タブの数を増やすことが可能です。

HTML側で配置を変更するだけでアコーディオンのような動作にもなります。

SAMPLE［２］

表示非表示の切り替わる動作は、SCRIPT内の「slideDown」の部分を変更すれば
さまざまなパターンも設定可能です。

表示非表示の切り替わりをフェードにしてみると。。。

SAMPLE［３］

タブ切り替えのインターフェースはサイト内で頻繁に使用するものなので
シンプルな構成で組み込んでおくといいと思います。

タブ切り替えのインターフェースが必要な際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから