素人のjQuery奮闘記 その2

素人が手探りでjQueryでWebサイトによくある機能を作った奮闘記②です。

前回に引き続き、jQueryを学んでいきます。
今回はタブ機能を作成します。

#作るときの縛り
未知の技術を学ぶ練習も兼ねて、使えるメソッドを自分で判断し、組み立てる事ができるようになることを目標として、今回は縛りを設けて作成しています。

・jQueryの公式リファレンスのみ
・検索をかけるときは、「メソッド名　jQuery」という検索ワードのみ使用可
　「tab　作り方　jQuery」という書き方は、コードそのものが出てきてしまうのでNG
・命名規則は「FLOCSS＋BEM」を改変して使用。

#見本

よく見るタブ機能です。
タブ部分をクリックすると、内容が切り替わります。

###HTML
使用するHTMLは以下です。

<ul class="c-tab">
	<li class="c-tab__title highlight">タブ1</li>
	<li class="c-tab__title">タブ2</li>
	<li class="c-tab__title">タブ3</li>
	<li class="c-tab__title">タブ4</li>
</ul>

<ul class="c-tab c-tab__textBox">
	<li class="c-tab__text on">内容1</li>
	<li class="c-tab__text">内容2</li>
	<li class="c-tab__text">内容3</li>
	<li class="c-tab__text">内容4</li>
</ul>

###CSS
ベースとなるタブのスタイルをあてています。

.c-tab{
	font-size: 1.4rem;
	display: flex;
}

.c-tab__title{
	background-color: #ccc;
	padding: 5px 5px;
}

.c-tab__text{
	display: none;
	width: 600px;
	text-align: center;
	padding: 20px;
	background: #99998a;
	color: #fff;
}

/*onがついたとき表示する*/
.on{
	display: inline-block;
}

/*わかりやすいように表示されているタブに色を付けるスタイルを追加。*/
.highlight{
	background-color: yellow;
}

#作ってみよー！
###使えるメソッドの検討
まず、クリックかきっかけとなってテキストが切り替わるのでclick()は使うでしょう。
次はどうやって切り替えるかですが、前回学んだクラスを付け替えることを利用して、クラスがついたものを表示させれば良さそう。なので、addClass()、removeClass()は使いそう！

ということで最初に検討を付けたのは
・click()
・addClass()
・removeClass()
です。

この時点で特に不足に気づきませんでした。作ってみながら考えます。

###失敗
早速作って見ました。
が、これらのメソッドだけでは「タブ1」をクリックしたときに対応する「内容1」を判別することが出来ず、クリックしても全く動きませんでした。どうやって、対応する内容を判別するか…。

リストの要素数は同じなので、クリックした「c-tab__title」何番目の要素なのかを取得し、それと同じ番号の「c-tab__text」を表示させればいいのでは？？？

ということで、新たに
・index()　－クリックした要素が何番目か取得する
・eq() －引数に指定した番号の要素を呼び出す
を使用することに。

#もう一度作成
###JS

$(function(){
	$(".c-tab__title").click(function(){
		// クリックした要素が何番目の要素か取得
		var index = $(this).index();
		// 取得した番号のクラスを取得
		var text = $(".c-tab__text").eq(index);

		// クラスの付替え
		$(".c-tab__title").removeClass("highlight");
		$(this).addClass("highlight");
		$(".c-tab__text").removeClass("on");
		$(text).addClass("on");
	});
});

クラスを付け替える方法で、無事作成することが出来ました。
めでたしめでたし！