初心者でもできるjQueryタブメニューの作り方

今回はjQueryでのタブメニューの実装について説明していきます。

jQueryの基本が分かっていれば、難しいところはないので理解できると思います。
わからない方はとりあえず下のコードをコピーして使ってみて、どのコードがどういう役割をしてるかを自分で検証してみてください。
まず最初にサンプルコードを載せておきますので、jQueryわかるよって方はコードだけコピーして、解説は飛ばしてください。

HTMLサンプルコード

<ul class="tab-menu">
     <li><a href="#tab1">tab1</a></li>
     <li><a href="#tab2">tab2</a></li>
     <li><a href="#tab3">tab3</a></li>
</ul>

<ul class="tab-content">
     <li id="tab1">tab1のコンテンツ</li>
     <li id="tab2">tab2のコンテンツ</li>
     <li id="tab3">tab3のコンテンツ</li>
</ul>

CSSサンプルコード

.tab-content{
     display:none;
}
.tab-menu{
list-style:none;
}
.tab-menu li{
display:inline-block;
padding:5px 20px;
}
.tab-menu li a{
color:#666;
font-weight:bold;
font-size:1.2em;
}
.school-tab li.active{
color:#f50;
border-bottom:3px solid red;
}
.tab-menu li.active a{
color:#444;
}

jQueryサンプルコード

$(document).ready(function() {
$('.tab-content:first').show();
$('.tab-menu li:first').addClass('active');
$('.tab-menu li').click(function() {
$('.tab-menu li').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
$($(this).find('a').attr('href')).fadeIn();
return false; 
});
});

解説

上から順に説明していきます。

$(document).ready(function() {

こちらはドキュメントがレディーしたときにfunction(){}の中のコードを実行するというコードになります。document.readyが何かわからない方は

http://vatscy.github.io/blog/2014/02/22/document-ready/
http://qiita.com/8845musign/items/88a8c693c84ba63cea1d

上記の記事に詳しい説明が書いてありますので、ご覧ください。

$(‘.tab-content:first’).show();

「tab-content」というクラスの一番目(:first)の要素を表示させます。
CSSで先に「tab-content」をdisplay:none;にしていたのを、jQueryが実行されたときに表示という感じになっています。

$(‘.tab-menu li:first’).addClass(‘active’);

「tab-menu」というクラスの中の「li」との一番目に対して「addClass」を使用し「active」というクラスをつけています。これにより、activeとなった「.tab-menu li」には「active」クラスのCSSが適用されるため、一目で選択されているとわかるようにしています。

$(‘.tab-menu li’).click(function() {

「tab-menu」というクラスの中の「li」がクリックされたらfunction(){}の中を実行するというコードです。

$(‘.tab-menu li’).removeClass(‘active’);
「tab-menu」の中の「li」についている「active」というクラスを取り除きます。

$(this).addClass(‘active’);

この「this」というのはクリックされた「.tab-menu li」を表していて、その「li」に対して「active」というクラスを付与しています。この「this」というのは結構やっかいで説明するのに長くなるのでここでは触れません。

$(‘.tab-content’).hide();

「tab-content」クラスに対してhide()を使用して、一旦非表示にしています。

$($(this).find(‘a’).attr(‘href’)).fadeIn();

ここが少しややこしいコードなんですが、簡単に説明すると「$().fadeIn()」で要素表示しています。
fadeIn()が何かわからない方は、
http://www.jquerystudy.info/reference/effects/fadeIn.html

の記事を読んでみてください。なんとなくわかると思います。
そして問題は何をfadeIn()させてるかということなんですが、コードを見てもらえばわかると思いますが、「
$(this).find(‘a’).attr(‘href’) 」という要素に対してfadeIn()を使用しています。

ここで「tab-menu」クラスのliの中のaタグに注目してください。
<a href=”#tab1″>tab1</a>

href=””に「ID=tab1」を指定していますよね？※「#」はIDという意味です。
そして、「tab-content」クラスのなかのliを見てもらうと、

<li id=”tab1″>

となっているのがわかると思います。

上記を踏まえたうえで先ほどのコードを見てみると、

$($(this).find(‘a’).attr(‘href’)).fadeIn();

はthis(クリックされた「tab-menu」クラスのli)の中にある「a」を見つけて（.find()）、そのaタグの中のhref=””の要素をfadeIn()させるというコードになるわけですね。これ以上わかりやすく説明するのは僕の日本語力では無理ですのであきらめてください。

tab1をクリックした例

.tab-menu liのtab1をクリック

this = .tab-menu li#tab1

$($(this).find(‘a’).attr(‘href’)).fadeIn(); = $(‘#tab1’).fadeIn();

つまり.tab-contentの中にある「tab1」というIDのものをfadeIn()させる。

おわかりいただけましたか？
こういう流れでタブの切り替えができてるわけですね。

まとめ

jQueryはかなり便利なものですが、慣れすぎてしまうとJavascriptを書くときにものすごくめんどくさく感じます笑
ですのであまりjQueryに頼りすぎるのもよくないかと思います。（僕はかなり頼ってますが。。。）

では。