誰でも出来る!プラグインを使わずにjQueryで実装するタブ切り替え機能!

tabu

 

こんにちは、ミキです。

今回はアウトプットの場として、
最近プラグインを使わずに実装した
タブ切り替え機能の紹介をしたいと思います。

 

HTML

まずタブとタブに連動したコンテンツのHTMLを用意します。

一番目のタブに「class=”select”」をつけます。

最初に表示させないコンテンツにはあらかじめ「display:none;」を設定しますので、
ここでは「class=”hide”」をつけました。

ちなみにダミーテキストは夏目漱石の坊っちゃんからです。

<ul class="tab">
	<li class="select">タブ1</li>
	<li>タブ2</li>
	<li>タブ3</li>
	<li>タブ4</li>
</ul>
<ul class="content">
	<li>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</li>
	<li class="hide">なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</li>
	<li class="hide">新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。</li>
	<li class="hide">弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</li>
</ul>

 

CSS

先ほどつけた「hide」というクラスには「display:none;」を設定します。
それ以外は最低限のCSSのみ記述しているので、必要な部分はお好みで書き込んでください。
(ちなみにCSSはリセットされている状態です。)

.tab{overflow:hidden;}
.tab li{background:#ccc; padding:5px 25px; float:left; margin-right:1px;}
.tab li.select{background:#eee;}
.content li{background:#eee; padding:20px;}
.hide {display:none;}

 

jQuery

jQueryで『タブをクリックしたら連動したコンテンツを表示する』指示を記述していきます。
もちろんですが、jQueryは先に読み込ませてください。

$(function() {
	//クリックしたときのファンクションをまとめて指定
	$('.tab li').click(function() {

		//.index()を使いクリックされたタブが何番目かを調べ、
		//indexという変数に代入します。
		var index = $('.tab li').index(this);

		//コンテンツを一度すべて非表示にし、
		$('.content li').css('display','none');

		//クリックされたタブと同じ順番のコンテンツを表示します。
		$('.content li').eq(index).css('display','block');

		//一度タブについているクラスselectを消し、
		$('.tab li').removeClass('select');

		//クリックされたタブのみにクラスselectをつけます。
		$(this).addClass('select')
	});
});

 

DEMO

問題なく実装できていればデモのようになります。

  • タブ1
  • タブ2
  • タブ3
  • タブ4
  • 親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。
  • なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。
  • 新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。
  • 弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。

 

いかがでしょうか?

数行のjQueryで誰でも簡単にタブ切り替えが出来るので、ぜひ実装してみてください。

【2016/2/23 追記】
ご指摘をいただいておりました誤植部分の修正をいたしました。
このページに辿り着き、参考にしてくださった皆さま、
誠に申し訳ございません。。
ご指摘ありがとうございました!

下の Three & Co. Facebook Page の「いいね」ボタンを押して、
Three からのお知らせを受け取ろう!