ウェブデザイナーの毎日のお仕事のメモ

作成日:2019.10.02  最終更新日:2021.01.04

js / jQuery

jQueryを使ってシンプルなタブ表示をつくる方法

表示する要素が多いときなどに表示を整理できるタブの表現。色々な場面で使えるかと思います。jQueryを使えば、簡単に作ることができます。

jQueryで簡単にタブをつくる

コード

HTML

最後に載せている完成サンプルには、コンテンツ部分に画像を入れたり、見出しタグを入れたりしています。
また、現在地が分かるよう、タブにクラスをつけます。

<ul class="tab-list">
		<li class="active">タブ01</li>
		<li>タブ02</li>
		<li>タブ03</li>
		<li>タブ04</li>
</ul>

<div class="tab-box">
		<div class="tab-content open">
			<p>タブ01のコンテンツです。コンテンツ</p>
		</div>
		<!-- /.tab-content -->
		<div class="tab-content">
			<p>タブ02のコンテンツです。コンテンツ</p>
		</div>
		<!-- /.tab-content -->
		<div class="tab-content">
			<p>タブ03のコンテンツです。コンテンツ</p>
		</div>
		<!-- /.tab-content -->
		<div class="tab-content">
			<p>タブ04のコンテンツです。コンテンツ</p>
		</div>
		<!-- /.tab-content -->
</div>
<!-- /.tab-box -->

CSS(基本的な部分のみ)

ご自身で用途に合わせて書き換えてください。
.tab-contentは、最初はdisplay:noneで隠していますが、openクラスが付与されたら、display:blockで表示されるようにしています。

.tab-list {
  display:flex;
  background:#eee;
  color:#999;
}

.tab-list li {
  width:25%;
  text-align:center;
  padding:20px;
}

.tab-list li.active {
  background:#87ceeb;
  color:#fff;
}

.tab-content {
  display:none;
  background:#fff;
  padding:40px 20px 20px;
}

.tab-content.open {
  display:block;
}

JS

タブをクリックしたら、何番目のタブがクリックされたかを取得して、対応するコンテンツにopenクラスをつけて、います。

$('.tab-list li').click(function() {
  var index = $('.tab-list li').index(this);
  $('.tab-list li').removeClass('active');
  $(this).addClass('active');
  $('.tab-box .tab-content').removeClass('open').eq(index).addClass('open');
});

クラスをつける、消すで、display:noneとblockを切り替える。
というのは、タブだけでなく他のものにも応用が効きます。
覚えておくと色々なところで使えるかと思います!

最新記事