Web初心者がjQuery 簡単なタブメニューを実装する方法(サンプル付き)

今回も、web初心者向けにタブメニューのjQueryを実装します。

photo credit: Peter Hellberg via photopin cc

ページコンテンツ

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

1	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

実際に動く記述を書きます STEP2

$(function(){
    
    //最初は、メニュー1を表示させる
    $('.tabbox:first').show();
    
    //メニュー1のliにactiveのクラスを付ける
    $('.tabmenu li:first').addClass('active');

    //タブメニューをクリックを押したら
    $('.tabmenu li').click(function() {
        $('.tabmenu li').removeClass('active');
        $(this).addClass('active');
        $('.tabbox').hide();
        $($(this).find('a').attr('href')).fadeIn();
        return false;
    });
});

$(function(){

//最初は、メニュー1を表示させる

$('.tabbox:first').show();

//メニュー1のliにactiveのクラスを付ける

$('.tabmenu li:first').addClass('active');

//タブメニューをクリックを押したら

$('.tabmenu li').click(function() {

$('.tabmenu li').removeClass('active');

$(this).addClass('active');

$('.tabbox').hide();

$($(this).find('a').attr('href')).fadeIn();

return false;

});

読み込んだときの初期状態とクリックを押したらタブを切り替える記述です。

タブのHTMLを設置します STEP3

<ul class="tabmenu">
    <li><a href="#tab1">メニュー1</a></li>
    <li><a href="#tab2">メニュー2</a></li>
    <li><a href="#tab3">メニュー3</a></li>
    <li><a href="#tab4">メニュー4</a></li>
</ul>
<div class="content">
    <div class="tabbox" id="tab1">
        タブメニュー1の内容です。<br />今日は晴れです。<br />明日は曇りです。
    </div>
    <div class="tabbox" id="tab2">
       タブメニュー2の内容です。<br />今日は曇りです。<br />明日は雨です。
    </div>
    <div class="tabbox" id="tab3">
       タブメニュー3の内容です。<br />今日は雨です。<br />明日は雷です。
    </div>
    <div class="tabbox" id="tab4">
       タブメニュー4の内容です。<br />今日は雷です。<br />明日は晴れです。
    </div>
</div>

</ul>

タブメニュー1の内容です。<br />今日は晴れです。<br />明日は曇りです。

</div>

タブメニュー2の内容です。<br />今日は曇りです。<br />明日は雨です。

</div>

タブメニュー3の内容です。<br />今日は雨です。<br />明日は雷です。

</div>

タブメニュー4の内容です。<br />今日は雷です。<br />明日は晴れです。

</div>

ちょっといつもより、長いコードですが難しくないhtmlです。

タブメニュー切り替えのためのCSS STEP4

.tabmenu,
.tabmenu li,
.tabmenu li a {
    float: left;
    padding:3px;
    margin-right:2px;
}

.tabmenu li{
	list-style-type: none;
}

.content {
    clear: both;
    overflow: hidden;
    width: 300px;
    border:1px solid #eee;
    height:200px;
}
.tabbox {
    display: none;
}
.tabmenu li.active {
    background: #eee;
}
.tabmenu li.active a{
    color:red;
}

.tabmenu,

.tabmenu li,

.tabmenu li a {

float: left;

padding:3px;

margin-right:2px;

}

.tabmenu li{

list-style-type: none;

}

.content {

clear: both;

overflow: hidden;

width: 300px;

border:1px solid #eee;

height:200px;

}

.tabbox {

display: none;

}

.tabmenu li.active {

background: #eee;

}

.tabmenu li.active a{

color:red;

}

今回は、htmlとjQueryの記述だけでは上手く表現できないのでCSSも忘れずに！

まとめ

今回も記述だけではと思いましたのでサンプルも作りました。

[サンプル] jQuery タブメニュー

よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。このタブメニューの切り替えは新着情報などが複数あるところに使えますね。これも良く使われます。

※firefox、クローム、IEで動いていることを確認しております。