タブは狭い画面に多くの情報を載せることができるので結構重宝します。
今回はタブをクリックすると表示内容が切り替わる基本的なタブを作ってみようと思います。
コードはめちゃめちゃシンプルです（特にjQuery）
また、コピペもオーケーです。
デモページはこちら↓
スライド形式で切り替わるタブを作りたい人は【jQuery】プラグインなし！タブのクリックで左右にスワイプする簡単なスライダーを作ってみるを参考にしてみてください。こちらもハイパーシンプルなコードで作りました。
コード
タブの基本的な性能を実装しただけなのでコードはいたってシンプルです。
<section id="tab">
<!--タブ-->
<div class="tab">
<ul>
<li><a href="#tab-item1">タブ1</a></li>
<li><a href="#tab-item2">タブ2</a></li>
<li><a href="#tab-item3">タブ3</a></li>
<li><a href="#tab-item4">タブ4</a></li>
</ul>
</div>
<!--パネル-->
<div class="panel">
<div id="panel-item1" class="panel-item">1つ目のアイテムです</div>
<div id="panel-item2" class="panel-item">2つ目のアイテムです</div>
<div id="panel-item3" class="panel-item">3つ目のアイテムです</div>
<div id="panel-item4" class="panel-item">4つ目のアイテムです</div>
</div>
</section>
/* 全体 */
#tab {
width: 400px;
}
/* タブ */
.tab ul {
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
padding: 0;
}
.tab li {
display: table-cell;
text-align: center;
background-color: pink;/* タブの背景色 */
list-style-type: none;
}
.tab li a {
display: block;
text-decoration: none;
}
/* パネル */
.panel {
position: relative;
width: 100%;
height: 600px;
}
.panel-item {
position: absolute;
width: 100%;
height: 100%;
}
/* 各々のパネルの背景色 */
#panel-item1 {
background-color: gray;
}
#panel-item2 {
background-color: skyblue;
}
#panel-item3 {
background-color: orange;
}
#panel-item4 {
background-color: yellow;
}
$('#tab').each(function(){
var $tabAnchors = $(this).find('.tab a'),//タブのaタグ
$panelItem = $(this).find('.panel-item');//各々のパネル
//最初のパネルを表示
$panelItem.eq(0).css({ zIndex: 9999 });
//タブがクリックされたらタブのインデックス番号を取得し、その番号のパネルを表示
$tabAnchors.click(function(event){
//デフォルトのaタグの動作をキャンセル
event.preventDefault();
//アンカーのインデックス番号を取得
var index = $(this).closest('li').index();
//パネルの表示・非表示を切り替え
$panelItem.hide();
$panelItem.eq(index).show();
});
});
見たらわかりますがとてもシンプルです。本当に最低限の機能しか持っていません。
使い方
（タブが上のクリックできる部分、パネルが切り替わる本体の部分です）
タブの数はいくらでも増やしてもらって構いません。
<ul>にdisplay: table; table-layout: fixed;がかかっているのでタブの幅は自動で均等になります。
要素の追加などを行う場合は<li>の外側なら大丈夫です。
でもできるだけタブはいじらないほうがいいかも。
また、パネルの数も増やし放題です。
パネルを追加する場合は<div id="panel-item◯" class="panel-item">としてください。（◯には番号が入ります）
この中なら要素をいくら追加しても大丈夫です。
解説
初心者向けということで念のため解説をします。
タブとパネルに分けて解説しますね。
タブ
HTML
<!--タブ-->
<div class="tab">
<ul>
<li><a href="#tab-item1">タブ1</a></li>
<li><a href="#tab-item2">タブ2</a></li>
<li><a href="#tab-item3">タブ3</a></li>
<li><a href="#tab-item4">タブ4</a></li>
</ul>
</div><ul>を使って<li>を並べただけで、この<li>がそれぞれのタブになっています。
中の<a>をクリックするとjQueryでイベントが発生する仕組みです。
CSS
/* タブ */
.tab ul {
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
padding: 0;
}
.tab li {
display: table-cell;
text-align: center;
background-color: pink;/* タブの背景色 */
list-style-type: none;
}
.tab li a {
display: block;
text-decoration: none;
}タブの親要素である<ul>にはdisplay: table; table-layout: fixed;を指定し、子要素の<li>にはdisplay: table-cellを指定することでタブの横幅が均等になるようにしています。タブの数を増やしても自動で均等になります。
また、<ul>内のmargin: 0; padding: 0;はデフォルトで指定されているmarginとpaddingを打ち消すためのスタイルです。
<a>にはdisplay: block;を指定しておくことで横幅全体がクリックできる範囲になります。
見栄えを考慮してtext-decoration: none;も指定しておきましょう。マウスがホバーした時の下線が表示されなくなります。
パネル
HTML
<!--パネル-->
<div class="panel">
<div id="panel-item1" class="panel-item">1つ目のアイテムです</div>
<div id="panel-item2" class="panel-item">2つ目のアイテムです</div>
<div id="panel-item3" class="panel-item">3つ目のアイテムです</div>
<div id="panel-item4" class="panel-item">4つ目のアイテムです</div>
</div>class="panel-item"を持った<div>が1枚のパネルになっています。
この中ならいくらでも要素を追加しても構いません。
CSS
/* パネル */
.panel {
position: relative;
width: 100%;
height: 600px;
}
.panel-item {
position: absolute;
width: 100%;
height: 100%;
}親要素である<div class="panel">にはposition: relative;を指定し、子要素である<div class="panel-item">にはposition: absolute;を指定します。
このように一度パネルを全て重ねて、jQueryで表示/非表示の操作を行います。
例えばタブ2がクリックされたらパネルを一度全て非表示にして、パネル2だけを表示します。
タブ3がクリックされたらまたパネルを全て非表示にして、パネル3だけを表示するといった感じです。
パネルの幅や高さは自由に変更可能です。
また、変化がわかりやすいように背景色をつけています。これは消してもらっても構いません。
/* 各々のパネルの背景色 */
#panel-item1 {
background-color: gray;
}
#panel-item2 {
background-color: skyblue;
}
#panel-item3 {
background-color: orange;
}
#panel-item4 {
background-color: yellow;
}
jQuery
$('#tab-slider').each(function(){
var $tabAnchors = $(this).find('.tab a'),//タブのaタグ
$panelItem = $(this).find('.panel-item');//各々のパネル
//最初のパネルを表示
$panelItem.eq(0).css({ zIndex: 9999 });
//タブがクリックされたらタブのインデックス番号を取得し、その番号のパネルを表示
$tabAnchors.click(function(event){
//デフォルトのaタグの動作をキャンセル
event.preventDefault();
//アンカーのインデックス番号を取得
var index = $(this).closest('li').index();
//パネルの表示・非表示を切り替え
$panelItem.hide();
$panelItem.eq(index).show();
});
});コメントを挟んであるので若干長く見えてしまいますが、実質コードは9行です。
変数は上記の解説通りです。
//最初のパネルを表示
$panelItem.eq(0).css({ zIndex: 9999 });CSSで全て重ねた状態にしているので一番前に表示されるのは最後のパネルになっています。なので最初のパネルを最前列に表示しましょう。
eq()で$panelItem(=各々のパネル)の0番目を取得し、css()のzIndexで最前列に表示します。
eq()は引数に指定したインデックス番号の要素を取得するメソッドです。
インデックス番号（何番目の要素であるか）は0番目から始まる（1番目からではない）ので、$panelItemの0番目＝最初のパネルが取得され、zIndex: 9999で最前列に表示されます。
//タブがクリックされたらタブのインデックス番号を取得し、その番号のパネルを表示
$tabAnchors.click(function(event){次に$tabAnchors(=タブの<a>)にclick()でイベントを発生させています。
click()は要素をクリックした時にイベントを発生させるメソッドです。
//デフォルトのaタグの動作をキャンセル
event.preventDefault();最初にevent.preventDefault()で<a>のデフォルトの動作をキャンセルします。
//アンカーのインデックス番号を取得
index = $(this).closest('li').index();クリックされた<a>の親要素である<li>のインデックス番号を取得し、それを変数indexに格納します。
closest()はその要素に最も近い親要素を取得するメソッドです。
また、index()はその要素のインデックス番号を取得するメソッドです。
例えば2番目のタブがクリックされたら、<a>の親要素である<li>のインデックス番号は1となります（インデックス番号は0からカウントします）。よって変数indexには1が格納されることになります。
//パネルの表示・非表示
$panelItem.hide();
$panelItem.eq(index).show();$panelItem(=各々のパネル)を一度全て非表示にして、先ほど取得したインデックス番号目のパネルだけを表示します。
前述の通り、eq()は引数に指定したインデックス番号の要素を取得するメソッドです。
先ほどの例で言うと変数indexには1が格納されているので、eq(1)となります。つまり2番目の$panelItemを取得します。
変数indexが2なら3番目の$panelItemを取得します。
次に取得したindex番目の要素をshow()で表示します。
show()は指定した要素を表示するメソッドです。
これで指定したパネルだけが表示されますね。
やや解説が多くなってしまったので簡単に流れをまとめると
- クリックされたタブのインデックス番号を取得し、変数indexに格納
- 一度全てのパネルを非表示
- index番目のパネルだけを表示
という感じです。
jQueryの勉強は以下の本が参考になりました。
タブ以外にも基本から様々なコンポーネントの作り方まで解説しているので、初心者におすすめです。
まとめ
今回は初心者向けにjQueryのプラグインなしで作れる簡単なタブを紹介しました。
jQueryはとにかく動くと楽しいので、色々作ってみましょう。その過程で色々なことが同時に学べるはずです。
手を動かしながら楽しく勉強できるのが一番ですね。
