jQueryとJavaScriptで作るクリッカブルなタブメニュー

クリックでウィンドウ内の表示がパパッと切り替わるシンプルなタブメニューです。

jQuery 版とノーマル JavaScript 版があります。お好みの方をどうぞ。

タブメニュー　共通設定

まずはタブメニューの共通設定として、デモとスタイルシートです。

デモ

• Tab 1
• Tab 2
• Tab 3

• Content 1111111
• Content 2222222
• Content 3333333

Tab1 / Tab2 / Tab3 それぞれのタブクリックでテキスト表示を切り替えます。

ちなみに、このデモはJavaScript版です。

CSS

CSSは、参考までにデモで動いてるスタイルシートを掲載しておきます。好みの形式に作り込んでみてください。

【CSS】
#ozTabs { /* タブのコンテナ */
  list-style: none;
  padding: 0;
  overflow:hidden:
  }
.ozTab { /* タブの基本設定 */
  float: left;
  padding: 5px 10px 3px;
  border-width: 1px;
  border-style: solid;
  border-color: #CCC #CCC #FFF #CCC;
  border-radius: 4px 4px 0 0;
  }
.ozTab:hover { /* マウスオーバー時の指定 */
  background-color: #EEE;
  cursor: pointer;
  }
.ozTab + .ozTab { margin-left: 10px; }
.tabBody { /* コンテンツのコンテナ */
  clear: both;
  margin: 0;
  padding: 1.4em;
  position: relative;
  top: -1px;
  z-index: 0;
  list-style: none;
  border: 1px solid #CCC;
  border-radius: 0 4px 4px 4px;
  box-shadow:rgba(0, 0, 0, .2) 2px 5px 10px -3px;
}
.tabContent { display: none; }
.active { /* カレント判定 */
  display: block;
  position: relative;
  z-index: 1;
}


jQuery版タブメニュー

こちら有名なコード過ぎて元ネタがもはやどなたか判らないのですが、雑感としては各要素を子孫で取り出すケースを良く見かけます。

大枠のリストを用意して、子孫セレクタで振り分けたシンプル設計。ただし、セレクタの処理は直接クラス指定した方がずっと速いことになっています。

タブメニューで使われるくらいのコードだと、気になるほど遅くなることはないと思いますが、各要素にそれぞれクラスを付けてみました。

jQuery

【jQuery】
$(function() {
// タブがクリックされた時に実行する
  $(".ozTab").click(function() {
 
// クリックされたタブの値をnumに入れる
    var num = $(".ozTab").index(this);
 
// クリックしたタブに現在地のクラスを与える
    $(".ozTab").removeClass('active');
    $(this).addClass('active')
 
// コンテンツの中からタブと同じ順番の要素に現在地のクラスを与える
    $(".tabContent").removeClass('active');
    $(".tabContent").eq(num).addClass('active');
  });
});


HTML

【HTML】
<ul id="ozTabs">
  <li class="ozTab active">Tab 1</li>
  <li class="ozTab">Tab 2</li>
  <li class="ozTab">Tab 3</li>
</ul>
<ul class="tabBody">
  <li class="tabContent active">Content 1111111</li>
  <li class="tabContent active">Content 2222222</li>
  <li class="tabContent active">Content 3333333</li>
</ul>


プログラムをいじらずにHTML側の要素がどんどん足せる点がこのコードの素晴らしいところですね…。(´ω｀*)

JavaScript版タブメニュー

あと、こちらはライブラリ不要で単独動作するタブメニューです。

この記事を書くにあたり、jQueryのコードを貼ったらそのままでは走らなかったのでJavaScriptでも書いてみました。(；・`д・´)｛本末転倒

JavaScript

【JavaScript】
function clickSwitch() {
  'use strict';
  var isTab = 0; // 現在地判定
  function setState(num) {
    for (var i=0; i<3; i++){
    if(num==i)continue;
    document.getElementById('t'+i).className = "ozTab";
    document.getElementById('c'+i).className = "tabContent";
    }
    document.getElementById('t'+num).className = "ozTab active";
    document.getElementById('c'+num).className = "tabContent active";
  }
  setState(0);
  for (var i=0; i<3; i++){
    document.getElementById('t'+i).addEventListener('click', function(){
    var num = this.getAttribute("data-num");
      if (isTab == num) return;
      isTab = num;
      setState(num);
    });
  }
};
document.addEventListener("DOMContentLoaded", clickSwitch, false);


HTML

【HTML】
<ul id="ozTabs">
  <li id="t0" data-num="0" class="ozTab active">Tab 1</li>
  <li id="t1" data-num="1" class="ozTab">Tab 2</li>
  <li id="t2" data-num="2" class="ozTab">Tab 3</li>
</ul>
<ul class="tabBody">
  <li id="c0" class="tabContent active">Content 1111111</li>
  <li id="c1" class="tabContent">Content 2222222</li>
  <li id="c2" class="tabContent">Content 3333333</li>
</ul>


JavaScript版のHTMLでは、処理の都合で id と data-num がつきます。項目数を増減させるときにご注意くださいませ。

おわりに

以前タブメニューの話を書こうと思って、CSSだけ載せてた話の続きでした。肝心のコード部分を書いてなかったので宿題提出です。