スタンダードなタブメニューですが、作るとなると意外と面倒です。
でもプラグインを使うほどでもないので、以下のソースをコピペでお使いください。
タブ
シンプル
スムーズ
拡張性
過去に作ったサンプルより
ソースをシンプルに
滑らかな動きで
数が増えても大丈夫
アクティブなボタンの前後にclassを追加して、少しだけ飾りっ気をつけています。
スタンダードなタブメニューですが、作るとなると意外と面倒です。
でもプラグインを使うほどでもないので、以下のソースをコピペでお使いください。
アクティブなボタンの前後にclassを追加して、少しだけ飾りっ気をつけています。
JSのコードはこちら
$(document).ready(function(){ //タブよりボディが小さくならように i = $('#demo_tab div').length; w = $('#demo_tab div').width(); $('#demo_body div').css('min-width',i*w); //メインのタブの左右に別クラスをつけてみる $('#demo_tab div.act').prev().addClass('near'); $('#demo_tab div.act').next().addClass('near'); //クリックしたら $('#demo_tab div').on('click',function(){ //色の付け替えをする $('#demo_tab div').removeClass(); $(this).addClass('act'); $(this).prev().addClass('near'); $(this).next().addClass('near'); //タブと同じ番目を取得 n = $('#demo_tab div').index(this); $b = $('#demo_body div').eq(n); //タブと同じ番目以外を消す。 $b.prevAll().hide(); $b.nextAll().hide(); //タブと同じ番目のボディを表示 $b.fadeIn(); }); });
スタイルはこちら
#demo_tab{ display: flex; } #demo_tab div{ text-align: center; color: #FFF; background: #CCC; border-radius: 10px 10px 0px 0px; font-size: 12px; line-height: 30px; height: 30px; padding: 0 10px; cursor: pointer; } #demo_tab div.act{ background: #666; } #demo_tab div.near{ background: #999; } #demo_body{ } #demo_body div{ background: #666; min-height: 200px; display: none; color: #FFF; font-size: 12px; line-height: 30px; padding: 0 10px; } #demo_body div.act{ display: block; }
jQueryのnext,nextAllやprev,prevAllのメソッドの使用例にもなっています。