Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

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

更新日:

今回も、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>

実際に動く記述を書きます 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;
    });
});

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

タブの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>

ちょっといつもより、長いコードですが難しくない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;
}

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

まとめ

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

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

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

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

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.