JavaScript プログラミング

【jQuery初心者】たったの5行でタブメニューを実装する方法

 

こんにちは、イケゾーです。

イケゾー
今回は、jQueryを使ったタブメニューの実装方法を紹介するよ

 

ページ内に多くの情報をコンパクトに表示するための「タブメニュー」ですが、ほとんどのサイトで採用されております。例えば企業HPにおいて、お知らせ一覧を「お客様へ」「取引会社様へ」「従業員へ」といったように、カテゴリ別に表示したりするのに使われます。

ユーザを上手にページ内を誘導できるので、設置しておいた方が良いですね。ページ内で、ユーザの求める情報を少ないスクロールやクリックでアクセスできるように配置できるよう使えると良いでしょう。

HTML/CSSだけを触っただけの方にとって、jQueryのこういった動きのあるモノってハードル高く感じます。僕もそうでした。しかし、仕組みを理解してから取り組んでみると、意外と大したことはありません。なので当記事では、コードを掲載するだけでなく文章で噛み砕き、超初心者向けに丁寧に解説していきます。

コードはそのまま仕事に応用できる財産になりますので、ぜひ手を動かしてPC上で動かしてみてください。

この記事はこんな人におすすめ!

  • jQuery初心者(どうやって使うの?なにができるの?)
  • jQueryってなんだか難しそうって思っている
  • jQueryで簡単なタブメニューの実装をしたい
  • jQueryの「addClass,removeClass」の使い方を知りたい

 

スライドショーにも挑戦しよう
【jQuery初心者】簡単なスライドの作り方|アニメーションサンプル有り

続きを見る

スムーススクロールにも挑戦しよう
【jQuery初心者】ページ内リンクでスムーススクロールを実装する方法

続きを見る

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

 

【jQuery初心者】たったの5行でタブメニューを実装する方法

このような流れで実装していきますね。

 

完成物の確認

記事のトップに動画で載せましたが、実装していく内容はこちらです。

  • タブメニュー
    「menu1〜menu3」のボタンをクリックすると、対応した「tab-content」が表示されます。
  • デザイン
    クリックされた「menu」の背景色とボーダが変化します。

注意点ですが、基本的なHTML,CSSは出来ていて、jQueryが使える状態であることを前提に進めいてきます。不安な方はこちらの記事で確認してから始めましょう。

HTML/CSSの基本
初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

続きを見る

 

HTMLとCSSの準備

jQuery導入に必須です。こちらで最新版を確認してください。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

ここでつまずく事も多いので、心配な方は念のためチェックしてください!

 

HTML

<h2 class="my-5">jQueryのタブメニュー</h2>
<div class="tab-sample">
  <ul class="tab">
    <li class="active">menu1</li>
    <li>menu2</li>
    <li>menu3</li>
  </ul>
  <div class="tab-area">
    <div class="tab-content show">
      <p>menu1の中身です</p>
    </div>
    <div class="tab-content">
      <p>menu2の中身です</p>
    </div>
    <div class="tab-content">
      <p>menu3の中身です</p>
    </div>
  </div>
</div>

 

CSS

.tab{
	border-bottom: 3px solid #ccc;
	display: flex;
	justify-content: space-around;
	margin: 0;
}
.tab li{
	margin-bottom: -3px;
	padding: 10px 20px;
	border: 1px solid #ccc;
	border-bottom: none;
	cursor: pointer;
}
.tab li.active{
	border-bottom: 3px solid tomato;
	background: #ccc;
}
.tab-area{
	border: 1px solid #ccc;
	height: 100px;
}
.tab-area div{
	display: none;
}
.tab-area .show{
	display: block;
}
.tab-content{
	margin: 20px 50px;
}

 

jQueryの解説

では、jQueryを書いていきます。まずは大切な仕組みの理解をしましょう。

  1. タブ(menu1〜3)がクリックされたら、それが何番目か(index)を取得します。
  2. 「tab-content」から「.show」を一旦削除して、「tab-content」index番目に「.show」をつけて表示させます。
  3. タブについている「.active」を一旦削除して、クリックされたタブに「.active」をつけます。(これはデザインのためです)

コードを文章にて解説していますので、文章を読みながらコードを見てください。
何回か見ていると、コードが読めるようになってきます。

 

jQuery

$(function(){
	// タブがクリックされたら
	$('.tab li').on('click', function(){

		// クリックされたタブが何番目か取得する
		var index = $('.tab li').index(this);

		// 「.active」をいったん外す
		$('.active').removeClass('active');

		// クリックされたタブに「.active」をつける
		$(this).addClass('active')

		// 「.tab-content」から「.show」を取り外す。
		// 「.tab-content」のindex番目に「.show」をつける
		$('.tab-content').removeClass('show').eq(index).addClass('show');
	});
});

 

 

まとめ

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう
  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-JavaScript, プログラミング
-, , , ,