【jQuery】タブの切り替えメニューの実装方法

今回は、jQueryを使ってタブの切り替えメニューの実装方法を紹介します。

タブ切り替えはページの幅を取らずにコンテンツを切り替えることが出来るので、良くWEBサイトで使われている実装です。

【jQuery】タブの切り替えメニューの実装方法

完成形はこちらです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

試しにタブをクリックして表示が切り替わるか確認してみてください。

それではコードを見ていきましょう。

HTML

タブメニューと日付やタイトルといったコンテンツを実装します。

CSS

タブメニュー切り替えに関する箇所を解説していきます。

◎40~45行目

「is-acrive」が付いたら、border線やフォントが濃くなるようにします。

◎65~70行目

newsblockに当たる要素は通常は表示せずに、「is-show」がついた時だけ表示するようにします。

jQuery

jQueryのCDNコードはこちら。

そして、タブメニュー切り替えのコードはこちら。

タブメニューである「tab」をクリックすることで、つけたり外したり出来るようにしました。

そして「is-show」を使って表示を切り替えるようにしました。

まとめ

以上が、jQueryでタブの切り替えメニューの実装方法でした。

 

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事