外部ファイル不要、コピペで使えるタブ表示するJavaScript/CSS

以前紹介した記事ネットショップ陳列に便利なタブ表示(CSS,HTML)ではCSSを使ってタブ表示を実現する方法を紹介しました。

タブ表示を実現する方法としては色々な方法がありますがCSSのみで実現する方法、また最近ではjQueryを使ってタブ表示をする方法などあります。

jQueryを使う方法も良いですが、ライブラリなどの外部ファイルが必要になり導入を少し手間に感じてしまう所があるかもしれません。

そこで、本日はjavascript/CSSを使ってタブ表示をする方法を紹介したいと思います。

タブ表示のサンプルソース

<script>
function disp1(){
  tab1.style.display="block";
  tab2.style.display="none";
  tab3.style.display="none";
}
function disp2(){
  tab1.style.display="none";
  tab2.style.display="block";
  tab3.style.display="none";
}
function disp3(){
  tab1.style.display="none";
  tab2.style.display="none";
  tab3.style.display="block";
}
</script>
 
<style>
#tab1 {display:block;}
#tab2 {display:none;}
#tab3 {display:none;}
 
div.tab{
  width:500px;
  height:150px;
  border:solid 1px #000;
}
 
ul.tabmenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
 
ul.tabmenu li {
  float: left;
  width: 100px;
  margin-right: 5px;
  padding: 2px;
  border: 1px #000 solid;
  background-color: #D3D3D3;
  text-align: center;
}
 
.clearLeft {
clear: left;
}
</style>
 
<ul class="tabmenu">
<li><a href="#" onclick="disp1();">タブ１</a></li>
<li><a href="#" onclick="disp2();">タブ２</a></li>
<li><a href="#" onclick="disp3();">タブ３</a></li>
</ul>
<br class="clearLeft">
<div class="tab" id="tab1">
  コンテンツ１コンテンツ１コンテンツ１
  コンテンツ１コンテンツ１コンテンツ１
  コンテンツ１コンテンツ１コンテンツ１
</div>
<div class="tab" id="tab2">
  コンテンツ２コンテンツ２コンテンツ２
  コンテンツ２コンテンツ２コンテンツ２
  コンテンツ２コンテンツ２コンテンツ２
</div>
<div class="tab" id="tab3">
  コンテンツ３コンテンツ３コンテンツ３
  コンテンツ３コンテンツ３コンテンツ３
  コンテンツ３コンテンツ３コンテンツ３
</div>

1行目～17行目 javascriptを定義している部分になります。
サンプルではタブは３つなので、 disp1()、disp2()、disp3()の３つの処理を記述しています。

それぞれ、タブメニュークリック時に呼び出される処理を定義しています。
tab1.style.display=”block”; → tab1を表示
tab2.style.display=”none”; → tab2を非表示
上記のように、表示、非表示を制御しています。
（タブを５つにしたい場合は、disp4()、disp5()という感じで追加する必要があります。）

19行目～49行目でCSSの記述をしています。
タブメニュー部分の見た目を変更する場合は、36行目～43行目でサイズ、色等調整可能です。

51行目～55行目 横並びのタブ表示部分になります。タブの数を増やす場合はここに＜li＞を追加します。
各＜li＞タグでonclick=”disp1();”と 上で定義したjavascriptを呼び出しています。

57行目～71行目が、各タブの表示内容を記述しています。
id=”tab1″という感じでそれぞれに違うidを付けています。
タブの数を５つにしたい場合は、
＜div id=”tab4″＞＜/div＞＜div id=”tab5″＞＜/div＞
という感じで表示エリアを追加します。

動作サンプル

jQueryのプラグインなどを使えば、アニメーション付きのタブ等も実装出来ますが外部ファイルなどを用意する手間など面倒に感じてしまうかと思います。

今回紹介した方法であればコピペで必要な部分を修正してもらえばある程度は使えるかなと思いますので、さくっとタブ表示を実装したい場合など活用してみてください。