Traversingメソッドを使ったタブパネルの作成 - 未経験のwebサイト制作の勉強

f:id:study-aaa:20190922144333p:plain

Traversingメソッドを利用

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

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

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

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

f:id:study-aaa:20190922144506p:plain

www.jquerystudy.info

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブパネルの作成</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/script.js"></script>
</head>

<body>
<div class="container">
<ul id="tab">
<li class="active"><a href="#spring">日本の春</a></li>
<li><a href="#summer">日本の夏</a></li>
<li><a href="#fall">日本の秋</a></li>
<li><a href="#winter">日本の冬</a></li>
</ul>
<div class="box active" id="spring">
<p><img src="img/spring.jpg" alt=""></p>
</div><!--/.box-->
<div class="box" id="summer">
<p><img src="img/summer.jpg" alt=""></p>
</div><!--/.box-->
<div class="box" id="fall">
<p><img src="img/fall.jpg" alt=""></p>
</div><!--/.box-->
<div class="box" id="winter">
<p><img src="img/winter.jpg" alt=""></p>
</div><!--/.box-->
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

html,body,h1,p,ul,li {
margin:0;
padding:0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
}
img {
vertical-align:bottom;
max-width:100%;
}
.container {
max-width:440px;
margin:50px auto 0;
background:#777;
padding:10px;
box-sizing:border-box;
}
#tab {
overflow:hidden;
}
#tab li {
width:25%;
height:50px;
float:left;
}
#tab li>a {
display:block;
text-align:center;
line-height:50px;
background:#444;
color:#FFF;
border-right:4px solid #777;
}
#tab li:last-child>a {
border-right:0;
}
#tab li.active>a {
background:#FFF;
color:#222;
}
.box {
background:#FFF;
padding:10px;
box-sizing:border-box;
display:none;/*非表示にする*/
}
.box.active {
display:block;/*非表示した要素を表示に戻す*/
}

// JavaScript Document
$(function(){
//#tabの子孫要素のa要素をクリックしたら、クリックしたa要素の
//親のliに.activeをaddする、
//さらにもし他のliに.activeが付いていたら、それをremoveする
$('#tab a').on('click',function(){
//タブに.activeを付けたり、外したり
$(this).parent('li').addClass('active').siblings('li').removeClass('active');

//クリックしたaのhrefを変数に代入
var target = $(this).attr('href');
console.log(target);
$(target).addClass('active').siblings('.box').removeClass('active');

});
});