jQueryを使ってタブ切り替えをつくろーう!

jQueryを使ってタブ切り替えをつくろーう!

こんにちは、ちゃんけいです。

4月も終わりですね、今月こそ月末の気になったWebサイトまとめの記事を書きたい限りです。。。

サイトまとめの記事を書くのって時間がかかるんですよね、いつもは30分~1時間くらいで書いてるのですが、サイトまとめは2時間くらいかかります。

うん、その時間あったら他のことしたくなる気がする。

さて!今回はよく使うjQueryを使ったタブ切り替えを紹介したいと思います。

タブ切り替えってどんなの?

タブ切り替えってどんなの?という方はこちらをご覧ください。

今回作るタブ切り替えになります。

See the Pen tab-change by Chankei (@Chankei) on CodePen.0

「 タブ1111,タブ2222 」の部分をクリックすると、下のコンテンツが切り替わるようになっています。

さくっと中身を見ていこう!HTML

まずはHTMLを見ましょう。

タブ切り替えは、要素の順番を使って実装するので

  • タブメニューに当たる部分( .tab-area )
  • タブコンテンツに当たる部分( .tab-content )

こちらの数を揃えて、かつdivなどで囲んであげます。

そして、最初は見えない状態になっているタブコンテンツには「 .hide 」というクラスをつけて見えなくしておきます。

See the Pen tab-change by Chankei (@Chankei) on CodePen.0

 

さくっと中身を見ていこう!jQuery

ここまでくればもう安心。

今回は頑張ってjsファイルに当たる部分にコメントを書きましたので、参考にしてください。

  • index()
  • eq()

今回肝になるのが、この2つ。詳しいことは調べてみてください。

See the Pen tab-change by Chankei (@Chankei) on CodePen.0

 

まとめ

いかがでしたでしょうか?

これ以外にもいくらでもやり方はあるので、気に入ったら手段の一つにしてください。

5月からは更新の内容が結構かわるはずですので!( リニューアルできたら )

Webのネタは少なくなるはず・・・あんまアクセスないし自分の好きなもっと楽しいことを書きたい・・・

 

それでは今回はこの辺で、ちゃんけいでした。