2016今回はjQueryでのタブメニューの実装について説明していきます。jQueryの基本が分かっていれば、難しいところはないので理解できると思います。わからない方はとりあえず下のコードをコピーして使ってみて、どのコードがどういう役割をしてるかを自分で検証してみてください。最初にサンプルコードを載せておきますので、jQueryわかるよって方はコードだけコピーして、解説は飛ばしてください。上から順に説明していきます。{こちらはドキュメントがレディーしたときにfunction(){}の中のコードを実行するというコードになります。document.readyが何かわからない方は上記の記事に詳しい説明が書いてありますので、ご覧ください。$('.tab-content:first').show();「tab-content」というクラスの一番目(:first)の要素を表示させます。CSSで先に「tab-content」をdisplay:none;にしていたのを、jQueryが実行されたときに表示という感じになっています。li:first').addClass('active');「tab-menu」というクラスの中の「li」との一番目に対して「addClass」を使用し「active」というクラスをつけています。li」には「active」クラスのCSSが適用されるため、一目で選択されているとわかるようにしています。{「tab-menu」というクラスの中の「li」がクリックされたらfunction(){}の中を実行するというコードです。li').removeClass('active');「tab-menu」の中の「li」についている「active」というクラスを取り除きます。li」を表していて、その「li」に対して「active」というクラスを付与しています。この「this」というのは結構やっかいで説明するのに長くなるのでここでは触れません。$('.tab-content').hide();「tab-content」クラスに対してhide()を使用して、一旦非表示にしています。$($(this).find('a').attr('href')).fadeIn();ここが少しややこしいコードなんですが、簡単に説明すると「$().fadeIn()」で要素表示しています。fadeIn()が何かわからない方は、の記事を読んでみてください。なんとなくわかると思います。」という要素に対してfadeIn()を使用しています。ここで「tab-menu」クラスのliの中のaタグに注目してください。href="#tab1">tab1</a>href=””に「ID=tab1」を指定していますよね?※「#」はIDという意味です。id="tab1">となっているのがわかると思います。上記を踏まえたうえで先ほどのコードを見てみると、$($(this).find('a').attr('href')).fadeIn();はthis(クリックされた「tab-menu」クラスのli)の中にある「a」を見つけて(.find())、そのaタグの中のhref=””の要素をfadeIn()させるというコードになるわけですね。これ以上わかりやすく説明するのは僕の日本語力では無理ですのであきらめてください。$(‘#tab1’).fadeIn();つまり.tab-contentの中にある「tab1」というIDのものをfadeIn()させる。おわかりいただけましたか?こういう流れでタブの切り替えができてるわけですね。まとめjQueryはかなり便利なものですが、慣れすぎてしまうとJavascriptを書くときにものすごくめんどくさく感じます笑ですのであまりjQueryに頼りすぎるのもよくないかと思います。(僕はかなり頼ってますが。よろしければシェアをお願いします。デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。delayの使い方CSSコメントアウトの重要性とデザインサンプルWordPressにプラグインなしでSNSのシェアボタンを設置してみました。YamashitaTop。