HP・ブログ関連

シンプルで使いやすいタブメニューを超簡単に作成する方法

投稿日:

今回はタブごとに内容の変わる"タブメニュー"をホームページ上に簡単に実装する方法について解説していきます!

※以前の記事で、すでにタブメニューの作成方法について解説していますが、今回紹介するタブメニューは実装がさらに簡単で改善されたものになります。

タブごとに内容を切り替える「タブメニュー」をホームページに作成する方法

タブメニューの実装

今回の記事では以下の様なタブメニューを実装することができます。

実装例:

シンプルで使いやすく、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>

何かご質問がありましたらコメント欄よりどうぞ!

-HP・ブログ関連
-, , , , , , , , , , ,

Copyright© ふかふか交易所 , 2019 All Rights Reserved.