業務でタブ切り替え動作の作成依頼があり、先日紹介した「jQueryでの連番要素を制御する方法」を利用して
タブ切り替え動作が実装できないか試したところ、意外とシンプルなSCRIPT構成で出来あがったので紹介してみます。
まずHTMLソースから。
※タブボタンは３つのパターンにしておきます。（いくつでも増やすことは可能）
※今回のサンプルは装飾なしでタブ切り替え動作のみのパターンにします。
◆HTML ≫<a href="javascript:void(0);" class="btn_act active">MENU【１】</a> ≫<a href="javascript:void(0);" class="btn_act">MENU【２】</a> ≫<a href="javascript:void(0);" class="btn_act">MENU【３】</a> <div id="motion_area1" class="motion"> ～MENU【１】クリックでオープンとなるタブエリア要素。～ </div><!--/tab_area1--> <div id="motion_area2" class="motion"> ～MENU【２】クリックでオープンとなるタブエリア要素。～ <img src="img/photo.jpg" /> </div><!--/tab_area2--> <div id="motion_area3" class="motion"> ～MENU【３】クリックでオープンとなるタブエリア要素。～ </div><!--/tab_area3-->
タブ切り替えのアクションを起こすボタン（リンク）に「class=”btn_act”」を付け、
アクティブ状態のタブについては「class=”active”」を付けます。
ボタンクリック後、表示する各エリアについては、
共通で「class=”motion”」を付けておき、
「id」はそれぞれ連番になるように「id=”motion_area1″」～「id=”motion_area3″」としておきます。
（これらのID名及びCLASS名はもちろん変更可能です。）
続いてCSS。
◆CSS
.motion {
width: 500px;
display: none;
}
#motion_area1 {
display: block;
}
a.active {
font-weight: bold;
background: #ddd;
}
表示エリアに共通に指定した「class=”motion”」はひとまず「display:none」で非表示に。
１番目の表示エリアのみページロード時に展開させるため、「#motion_area1」のみ「display:block」に切り替えます。（ページロード時に全ての表示エリアを非表示にする場合はこの指定は必要ありません。）
アクティブタブ用の「class=”active”」は今回はとりあえず太字と背景色を付けています。
そしてSCRIPT。
◆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');
});
});
ここのSCRIPT動作の詳しい説明は「jQueryでの連番要素を制御する方法」から。
今回の動作では、リンクタブがクリックされた際に、
自分のカウントナンバーと同じIDナンバーを持つエリアを
「slideDown」で表示に切り替えるのと併せて、自分に「class=”active”」を付加しています。
そして、これらを実際に動作させると以下のようになります。
SAMPLE［１］
リンクタブの数と表示エリアの数を比例させて、
表示非表示を切り替えているのでSCRIPTは変えずに、
タブの数を増やすことが可能です。
HTML側で配置を変更するだけでアコーディオンのような動作にもなります。
SAMPLE［２］
表示非表示の切り替わる動作は、SCRIPT内の「slideDown」の部分を変更すれば
さまざまなパターンも設定可能です。
表示非表示の切り替わりをフェードにしてみると。。。
SAMPLE［３］
タブ切り替えのインターフェースはサイト内で頻繁に使用するものなので
シンプルな構成で組み込んでおくといいと思います。
タブ切り替えのインターフェースが必要な際に是非。。。
Tweets that mention jQueryでタブ切り替えをシンプルなスクリプトで実装するサンプル - BlackFlag – Web Development Technical -- Topsy.com | 2010.10.14 19:48
[...] This post was mentioned on Twitter by gadget, YATSUGI-G. YATSUGI-G said: jQueryでタブ切り替えをシンプルなスクリプトで実装するサンプル(ﾟДﾟ)ｺﾞﾙｧ! http://black-flag.net/?p=1597 [...]
はじめまして。
こちらのサンプル参考にさせていただきとても勉強になりました！
有難うございます。
１つ質問なのですが、SAMPLE［３］の状態で、
各タブをクリックした状態へのリンクを別ページから設定したいのですが、
例)別サイトからあるリンクをクリックすると、SAMPLE［３］の≫MENU【２】が開いた状態。
そのような事は可能でしょうか？
お忙しいところ恐縮ですが、ご意見いただけますと嬉しいです。
何卒宜しくお願い致します。
＞ssさん
コメントありがとうございます。
このタブスクリプトをご活用いただいているようで
とても嬉しく思っております。
ご質問いただきました別ページからのリンクで
タブの展開位置を切り替える件についてですが
リンクされるURLに対して、アドレスの後に何番目のタブを開くか判断させる
アンカーリンク的な「#n」を付ける形ならば可能かと思います。
【例】—————————————————————————
ｈｔｔｐ：／／○○○○○．ｈｔｍｌ＃２
————————————————————————————
※２番目のタブを開く為のURL
そして実際のタブが存在するページのスクリプトには
以下の内容を追加します。
————————————————————————————
var url = document.URL;
if(url.indexOf(‘#’)){
var numSplit = ((url.split(‘#’)[1])-1);
$(‘.btn_act’).eq(numSplit).click();
}
————————————————————————————
飛んできたURLの「#」のついた番号を判別して
その番号のタブをクリックさせます。
サンプルファイルも用意しましたので
必要であれば下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryTabSimpleScript/jQueryTabSimpleScriptSwitch.zip
※ファイル内の「list.html」からご確認ください。
ご確認よろしくお願いします。
はじめまして。
超初心者で右往左往していたところ、こちらのサンプルに辿り着き、大変ありがたく参考にさせて頂いております。
質問なのですが、
初期状態で２つ目のタブが選択されている状態にしたい場合に、html側ではタブ部分の.activeの位置を変えるだけで対応したいのですが、jsファイルにはどのように記述すれば良いのでしょうか？
お忙しいところ、申し訳ありません＞＜
他力本願で恥ずかしいですが、教えて頂けると大変助かります。
どうぞよろしくお願いいたします。
＞ティサさん
コメントありがとうございます。
このタブスクリプトをご活用いただけているようで
こちらとしても嬉しく思っております。
ご質問いただきましたタブのアクティブ位置に関してですが、
HTML側でクラス「.active」を変えているならば
スクリプト上でその「.active」をクリックした状態にすれば大丈夫なのではないかと思っています。
スクリプトの最後に
————————————
$(“.active”).click();
————————————
を追加します。
追加位置については下記をご参考下さい。
————————————
$(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’);
});
$(“.active”).click();
});
————————————
こちらで一度試してみてください。
よろしくお願いします。
BlackFlag様
出来ました！
自分で、何だか変テコな方法で実装してたのですが
お陰様でスッキリしました！
本当にありがとうございます！！
＞ティサさん
実装のご報告ありがとうございました。
無事に実装できた様で安心致しました。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
すごく基本的な質問ですみませんが、
タブのデザインをそれぞれ変えることは可能ですか？
タブ背景に画像表示するなども可能でしょうか？
＞yokoさん
コメントありがとうございます。
タブのデザインを変えるにはソース上に
———————————————-
＜a href=”javascript:void(0);” class=”btn1 btn_act active”＞≫MENU【１】＜/a＞
＜a href=”javascript:void(0);” class=”btn2 btn_act”＞≫MENU【２】＜/a＞
＜a href=”javascript:void(0);” class=”btn3 btn_act”＞≫MENU【３】＜/a＞
———————————————-
などどして、個々のリンクに別々のクラス（「btn1」～「btn3」）を設定して
CSS側でクラスごとに装飾を変えることで可能になるかと思います。
（背景画像もCSS側から指定することで設定可能です）
ご確認よろしくお願いします。
BlackFlag様
はじめまして！
サンプルを拝見し是非活用したいと思っております！
と、私初心者で申し訳ないのですが、質問が3つあります。
■1
SAMPLE［３］にて、フェードさせずに、普通にパッパと切り替えるにはどこを修正すれば宜しいでしょうか？
■2
SAMPLE［３］にて、「≫MENU【３】」の箇所にプルダウンメニューを追加する事はできますでしょうか？
また、プルダウンメニュー内容も「≫MENU【３】」と同様のボックス内に表示する事は可能でしょうか？
プルダウンメニュー例として下記の様な形になります。
≫MENU【３】
≫≫MENU【３-1】
≫≫MENU【３-2】
≫≫MENU【３-3】
■3
IE8,9,10には対応しておりますでしょうか？
お手数をお掛けしますが、ご教授いただければ幸いです＞＜
何卒宜しくお願いいたします！
＞takeshiさん
コメントありがとうございます。
このタブ切り替えスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件ですが、、、
■1
スクリプト内の
—————————————-
$(‘#motion_area’+(showCont)).fadeIn(‘slow’);
—————————————-
を
—————————————-
$(‘#motion_area’+(showCont)).css({display:’block’});
—————————————-
と書き換えればいけるかと思います。
■2
メニュー部分を＜ul＞＜li＞構成にして
ドロップダウンのスクリプトを実装すればいけるのではないかと思っています。
■3
IE10ではまだ未確認ですが
その他のブラウザ動作は大丈夫だと思います。
（各ブラウザ環境で実際にこのページをご覧いただければ
動作についてはご確認いただけると思います。）
以上になりますが
ご確認の程よろしくお願いします。
BlackFlag様
お世話になっております。
情報ありがとうございました！
■1
→設定できました！
■2
→ドロップダウンのjsと絡めて何とかできました！
■3
→了解いたしました！ありがとうございます。各ブラウザで確認したいと思います。
また何かの際には質問させていただきたいと思います。
色々なスクリプトがあるので、とても参考になっております！
お手数をお掛けいたしましたが、ありがとうございました！
SAMPLE3を使っています。
非常に便利でありがたいです。
・・・気になるところが一つあります。
それは「タブをクリックすると、少し上に戻ってしまうこと」です。
しかし、タブ切り替えの下に、ある程度heightの長いものを作ると、上に戻ることはありません。
heightの長いものを作らなくても上に戻ることがないようにしたいです。
コレをどうにかしたいのですが、どうにかならないでしょうか？
＞tennsaiさん
コメントありがとうございます。
このタブスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
当記事のスクリプトではタブ部分の＜a＞タグには
「href=”javascript:void(0);”」を入れてあるので
画面の移動はしない構成になっております。
おそらく、仰っている現象はタブの切り替えごとに
ページ全体に対してスクロールバーが出るパターンと
出ないパターンが混在しているせいかと思われます。
切り替える際のエリアの高さを統一させるなどして
ページ全体に掛かるスクロールバーに影響しない（変化しない）
画面構成に調整してみてください。
よろしくお願いします。
はじめまして
今回自分の就活用のポートフォリオサイトを作ることになりまして、
こちらのサンプルを使用させてもらいました。
非常に便利で使いやすくて助かりました。ありがとうございます。
さて、今回質問がありまして、ご回答をお願い致します。
コメントコーナーの
http://black-flag.net/devel/jQueryTabSimpleScript/jQueryTabSimpleScriptSwitch.zip
を利用させていただいて、
別ページからのリンクで、タブの展開位置を切り替えるようになっているのですが、
タブ内にはリスト構造（ul,li)を入れています。
そこで、例えば、別のページからのリンクで、2番めのタブの中にある2番めのリスト内容に直接リンクさせる（移動する）ことは可能でしょうか？
お手数をお掛けしますが、ご教授いただければ幸いです。
何卒宜しくお願いいたします！
＞mashaさん
コメントありがとうございます。
このタブ切り替えスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
実装されているHTML構成を確認させていただけないと
何とも言えないのですが
スクリプト内の
——————————
$(‘.btn_act’).eq(numSplit).click();
——————————
が「＃」の付いた番号を判別して
どこをクリックさせるかの動作なので
例えばこの部分を
——————————
if(numSplit == 1){
$(‘#area2 ul li’).eq(2).find(‘a’).click();
}
——————————
とすることで
「#2」で飛んできた場合に
「#area2（仮）」とついたエリアの中の
リストの2番目をクリックさせることが出来るのではないでしょうか。
（憶測になりますが・・・）
お試しください。
よろしくお願いします。
はじめまして。いつも大変便利に使わせて頂いております。
SAMPLE3を使っているのですが。
ページのコンテンツを１つのページにまとめて、ページ毎で読み込みが発生せずシームレスに飛べるというような使い方をしようと現在コーディングしているのですが、タブを切り替えた瞬間にページの一番上まで自動的に戻る、というような機能を追加する事は可能でしょうか？
今のままだと、トップページを下にスクロールさせた後下層ページに飛ぶとそのページの途中から表示されてしまうというような状況です。
＞masさん
コメントありがとうございます。
このタブ切り替えスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
クリックするごとにページ最上部へ戻すには
スクリプトの8行目辺りに
———————————–
$(‘html,body’).scrollTop(0);
———————————–
と追記していただくことで
実現できるのではないかと思っております。
お試しください。
よろしくお願いします。
【WordPress】レスポンシブテーマに必須なコード、プラグインまとめ | HaLPosT | 2013.10.01 15:48
[...] $(this).addClass('active'); }); }); </script> ■参考サイト jQueryでタブ切り替えをシンプルなスクリプトで実装するサンプル | BlackFlag ■関連記事 [...]
【WordPress】テーマカスタム（主にレスポンシブテーマ）で参考になったサイト、ブログ2013 | HaLPosT | 2013.12.28 12:05
[...] jQueryでタブ切り替えをシンプルなスクリプトで実装するサンプル | BlackFlag [...]
タブ切り替えjQueryを使ってギャラリーを実装してみる | chiraxxx.com//Portfolio//WEBcreate//CSStemplate | 2014.05.22 0:05
[...] jQueryでタブ切り替えをシンプルなスクリプトで実装するサンプル [...]
【WordPressカスタム】single.phpに関連記事の他におすすめ記事、人気記事、新着記事をタブメニューを設置して表示しました！！ | HaLPosT | 2015.05.14 16:48
[...] normal [...]
はじめまして。
こちらのソースを参考にさせて頂いております。ありがとうございます。
別ページから各タブへのリンクも参考にさせて頂いたのですが、
同ページから各タブへアンカーリンク（移動）させながら、
各タブを開いた状態で表示は可能でしょうか？
上部に
≫MENU【１】 ≫MENU【２】 ≫MENU【３】のボタンが別であり、
クリックすると各タブへ移動しながらMENU【２】やMENU【３】も
開ける状態です。
宜しくお願い致します。
＞ニコマフさん
コメントありがとうございます。
このタブ切り替えスクリプトをご活用いただいているようで
ありがとうございます。
ご質問いただきました件についてですが
別ページから遷移した際の、指定タブのクリック動作のところに
指定ID位置へのスクロール処理も一緒に入れることで可能だと思います。
お試しください。
よろしくお願いします。
こちらのサイトをいろいろと参考にさせていただいております。
別ページから各タブへ直接リンクはわかったのですが、
同じページ内のタブからそれぞれのタブへ直接リンクする方法はあるのでしょうか。
例えばタブ1の中のあるテキストリンク「→タブ２へ」をクリックするとタブ２が開く、
という具合です。
タブクリック以外でタブを開く動作ができるととてもありがたい状況です。
よろしくお願いいたします。
＞oasisさん
コメントありがとうございます。
このタブ切り替えスクリプトをご活用いただいているようで
とても嬉しく思っております。
ご質問いただきました件についてですが
タブ内に設置しリンクでタブボタンをクリックさせるには
そのリンクに任意のCSSクラスをつけて、
そのクラスに対して
——————————-
$(‘.クラス名’)．eq(クリックさせるタブ番号)．click（）;
——————————-
といった感じで指定をすれば実装できるかと思います。
※上記は所々大文字で記載していますのでコピペする際にはすべて半角にしてください。
お試しください。
よろしくお願いします。