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

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

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

HTMLサンプルコード

CSSサンプルコード

jQueryサンプルコード

解説

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

$(document).ready(function() {

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

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

$('.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()が何かわからない方は、

の記事を読んでみてください。なんとなくわかると思います。
そして問題は何を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に頼りすぎるのもよくないかと思います。(僕はかなり頼ってますが。。。)

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。