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

公開日:  最終更新日:2021/11/30

外部ファイル不要、コピペで使えるタブ表示する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();">タブ1</a></li>
<li><a href="#" onclick="disp2();">タブ2</a></li>
<li><a href="#" onclick="disp3();">タブ3</a></li>
</ul>
<br class="clearLeft">
<div class="tab" id="tab1">
  コンテンツ1コンテンツ1コンテンツ1
  コンテンツ1コンテンツ1コンテンツ1
  コンテンツ1コンテンツ1コンテンツ1
</div>
<div class="tab" id="tab2">
  コンテンツ2コンテンツ2コンテンツ2
  コンテンツ2コンテンツ2コンテンツ2
  コンテンツ2コンテンツ2コンテンツ2
</div>
<div class="tab" id="tab3">
  コンテンツ3コンテンツ3コンテンツ3
  コンテンツ3コンテンツ3コンテンツ3
  コンテンツ3コンテンツ3コンテンツ3
</div>

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

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

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

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

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

動作サンプル


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

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




Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク
PAGE TOP ↑