JavaScriptでモバイルタブナビゲーションを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、モバイルタブナビゲーションを作りたいと思います。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

画像の切り替えは、showクラスをJavaScriptで切り替えることで実現します。

要素を取得する

最初に画面操作に必要な要素を取得します。

クリックイベントの登録

続いて、定番のクリックイベントを登録します。これは、モバイルのタブを押下されたら発火するイベントです。

前述の通り、画像を表示するにはshowクラスを付与します。また、クリックしたタブを選択状態にするため、activeクラスをつけています。

初期化

タブをクリックしたら現在の状態を一度クリアし、その後、showやactiveクラスをつけます。

classList.removeで、指定したクラスを削除できます。

これで完成です。

おわりに

今回は、デザインが可愛かったですね^^

JavaScriptよりもCSSの方が勉強になると思うので、別記事にできればなと思います 。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す