webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

Traversingメソッドを使ったタブパネルの作成

f:id:yachin29:20161001040013j:plain

Traversingメソッドを利用

Traversingのメリット

トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」から見てどういう関係性にある「要素」、という形で指定する事ができます。jQueryを使う上で非常に大事な考え方なので、しっかりと理解しましょう。


childrenメソッド
jQueryオブジェクトで指定した要素の「子」要素でセレクタにマッチする要素を選択します。子要素とは階層構造(入れ子構造)において直下にある要素のことです。
childrenメソッドを利用すれば「セレクタ:>(子要素)」と同じようなことが可能です。

parentメソッド
指定した要素の「親」要素を選択します。親要素とは階層構造(入れ子構造)において直上にある要素のことです。
名前が似ているparentsメソッドはparentメソッドと異なり「先祖」要素も選択します。

siblingsメソッド
指定した要素の兄弟要素(同じ階層の要素)を選択します。引数を設定しない場合はすべての兄弟要素を選択します。



f:id:yachin29:20170224130454p:plain

www.jquerystudy.info

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブパネルの作成</title>
</head>

<body>
<div class="container">
<ul id="tab_menu">
<li class="active"><a href="#spring">日本の春</a></li>
<li><a href="#summer">日本の夏</a></li>
<li><a href="#fall">日本の秋</a></li>
</ul>

<div class="photo_box active" id="spring">
<p><img src="img/tab_02.png" alt=""></p>
</div><!--/.photo_box-->
<div class="photo_box" id="summer">
<p><img src="img/tab_03.png" alt=""></p>
</div><!--/.photo_box-->
<div class="photo_box" id="fall">
<p><img src="img/tab_01.png" alt=""></p>
</div><!--/.photo_box-->
</div>
</body>
</html>
$(function(){
	$('#tab_menu a').on('click',function(){
		//タブのスタイルの切り替え
		$(this).parent('li').addClass('active').siblings('li').removeClass('active');

//画像の表示・非表示の切り替え
	var tabTarget = $(this).attr('href');

  $(tabTarget).addClass('active').siblings('.photo_box').removeClass('active');
	});
});