今回はタブごとに内容の変わる"タブメニュー"をホームページ上に簡単に実装する方法について解説していきます！
※以前の記事で、すでにタブメニューの作成方法について解説していますが、今回紹介するタブメニューは実装がさらに簡単で改善されたものになります。
-
-
タブごとに内容を切り替える「タブメニュー」をホームページに作成する方法
ページを切り替えることなく、同じページ内でタブごとに表示内容を変更する「タブメニュー」の作り方について、今回簡単に紹介しようと思います！ ちなみにタブメニューとは↓のように、タブをクリックするとページ ...
続きを見る
タブメニューの実装
今回の記事では以下の様なタブメニューを実装することができます。
実装例：
シンプルで使いやすく、CSSをいじることでデザインを変更することも可能です。
コードの貼りつけ
まず初めにjQueryのスクリプト行を実装します。＜head＞＜/head＞内に以下のコードを貼り付けます。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function() {
$(".tab li").click(function() {
var num = $(".tab li").index(this);
$(".tabContent").removeClass('active');
$(".tabContent").eq(num).addClass('active');
$(".tab li").removeClass('active');
$(this).addClass('active')
});
});
</script>
次にCSSに以下のコードを追加します。
ul.tab {
list-style: none;
}
ul.tab li {
float: left;
margin-right: 10px;
padding: 10px;
background-color: #f2f2f2;
color: #666;
cursor: pointer;
}
ul.tab li:hover {
color: #FF0000;
}
ul.tab li.active {
background-color: #999;
color: #fff;
}
div.tabContent {
clear: both;
border: 1px solid #ccc;
padding: 20px;
width: 300px;
display: none;
}
div.active {
display: block;
}
そしてさいごに以下のコードを、タブメニューを実装したい部分に貼り付けます。
<ul class="tab">
<li class="active">TAB 1</li>
<li>TAB 2</li>
<li>TAB 3</li>
</ul>
<div class="tabContent active">This is the content of TAB 1.</div>
<div class="tabContent">This is the content of TAB 2.</div>
<div class="tabContent">This is the content of TAB 3.</div>
以上で完了です！
これだけで実装例で示したようなタブメニューを作成できます。簡単ですね！((´∀｀))
タブの増やし方
実装例ではタブの数は3つですが、以下のコードの様に、さきほど追加したHTML行のタブの部分と、タブの中身の部分を追加するだけで、タブをいくつでも簡単に増やすことができます。
<ul class="tab">
<li class="active">TAB 1</li>
<li>TAB 2</li>
<li>TAB 3</li>
<li>TAB 4</li>
.
.
.
<li>TAB X</li>
</ul>
<div class="tabContent active">This is the content of TAB 1.</div>
<div class="tabContent">This is the content of TAB 2.</div>
<div class="tabContent">This is the content of TAB 3.</div>
<div class="tabContent">This is the content of TAB 4.</div>
.
.
.
<div class="tabContent">This is the content of TAB X.</div>
何かご質問がありましたらコメント欄よりどうぞ！
