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

公開日:  最終更新日:2015/06/11

外部ファイル不要、コピペで使えるタブ表示する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のプラグインなどを使えば、アニメーション付きのタブ等も実装出来ますが外部ファイルなどを用意する手間など面倒に感じてしまうかと思います。

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




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

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

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

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑