【徹底解説】5歳でも分かる、タブメニューの作り方(jQuery編)

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はタブメニューを作る方法を徹底的に解説します。

この記事は僕が書いている5歳でも分かるシリーズの1つです。こちらにスライドショーやタブメニューなどの作り方も載っていますのでぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

「htmlはデータの構造」「cssはその見せ方を作るもの」「jsはクラスの付け替えによってその2つを操作するもの」と言う切り分け方を前提に、jQueryのaddClass/removeClassを用いた方法で実装します。

また、初心者の方にわかりやすいよう説明を細かくしていきます。

作るものの確認

今回作るのは、このようにボタンを押すと対応したコンテンツに切り替わるようなメニューです。

コードは以下のものになりますので、何か困ったことが起きたらここのコードと見比べてみてください。(コピペでも使えます)

index.html
style.css

実装

準備

コードを書き始める前に、ディレクトリ構成の確認とリセットCSSの導入です。

├── index.html
├── resources
│   └── styles
│       ├── destyle.css
│       └── style.css

上記の形でファイルを配置しましょう。stylesはルートディレクトリ直下でも良いですが、実際にはresourcesの中にimagesフォルダなどと一緒に入っている形が多いのでそのようにしました。

destyle.cssというのがリセットCSSで、詳細な説明は省きますが各種タグに初期で当たっている様々な余計なスタイルを打ち消してくれるものです。

今回はこちら(https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css)のものを利用します。こちらのコードをそのままコピーしてdestyle.cssとして上記の場所に配置します。

destyle.css

見た目を作る

まずは見た目です。そんなに複雑ではないので一気に作っていきます。

.TabMenuのマージンはタブメニューを見やすい位置にしたかっただけなのでなくても良いです。

タブとコンテンツ部分は、それぞれアクティブなものだけ強調、表示される必要があります。そこで、.Tabクラスと.Contentクラスではそれぞれ半透明、非表示の状態で記述し、__isActiveと付いたクラスでアクティブな状態を分けて書きます。後でそのクラスをjQueryで付け替えることになります。

また、タブ部分はマウスカーソルを乗せた時にクリック可能であることがわかりやすいようにcursor: pointer;を指定しておきます。

タブとコンテンツを対応させる

タブ切り替えを実装する前に、どのタブを押したらどのコンテンツが表示されるのかを対応させる方法を紹介します。これには色々な方法がありますが、今回はdata属性を用いたものを使いましょう。

data属性とは、ある要素に対して意味のある情報を付加するために使われるものです。data-で始まるものは全てdata属性になります。詳細はこちら(https://developer.mozilla.org/ja/docs/Learn/HTML/Howto/Use_data_attributes)に書かれていますが、ちょっと複雑ですね。

とにかくやってみましょう。

このように、タブ側にdata-id属性を付与し、コンテンツ側にはid属性を付与します。そして中身をそれぞれ一致させます。これらを使ってjQueryから操作を行います。

動きをつける

それではクラスの付け替えをしていきます。まずはjQueryを読み込みます。bodyの一番下に書いてください。

また、その下にスクリプトを書いて行きます。

まずはタブをクリックした際に__isActiveと付いたクラスをタブとコンテンツからそれぞれ外します。

この状態でクリックすると、タブが全て半透明になりコンテンツが一旦消えます(試してみてください)。

次に、クリックしたタブとそれに対応するコンテンツにクラスを付け直します。ここで先ほどのdata属性を用います。

thisを使うことでクリックした要素を取得します。まずはそこにアクティブなクラスを付けます。

次にdata属性を使うのですが、data属性はjQueryのdataメソッドで取得することができます。data-に続く名前(今回はid)を引数に入れることでそのdata属性の値が取れます。タブ側でそれぞれContent1、Content2、Content3を設定していましたね。

そして、それに#を頭に付けて要素を指定すれば対応したコンテンツを指定できます。

これでタブの切り替えができるようになりました。完成です!

まとめ

というわけで今回はタブメニュを作りました。

data属性はあまり使ったことがないかもしれませんが、便利な機能なのでぜひ慣れてみてください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

【徹底解説】5歳でも分かる、ドロップダウンメニューの作り方

2021年10月20日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください