Traversingメソッドを使ったタブパネルの作成 - webサイトデザインAI入門科授業用ブログ

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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タブパネルの作成</title>
<style>
html,body,h1,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
}

.container{
width: 640px;
margin: 50px auto;
background-color: #CCC;
box-sizing: border-box;
padding: 10px;
}
#tab{
display: flex;
height: 50px;
background-color: #444;
}
#tab>li{
width: 33.33%;
}
#tab a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;
}
#tab>li:nth-of-type(n+2)>a{
border-left: 4px solid #CCC;
}
#tab>.current>a{
background-color: #FFF;
color: #444;
}
.box{
width: 620px;
padding: 10px;
box-sizing: border-box;
background-color: #FFF;
display: none;
}
.box.current{
display: block;
}
</style>
</head>
<body>
<div class="container">
<ul id="tab">
<li class="current"><a href="#one">1枚目</a></li>
<li><a href="#two">2枚目</a></li>
<li><a href="#three">3枚目</a></li>
</ul>
<div class="box current" id="one">
<img src="img/01.jpg" alt="">
</div>
<div class="box" id="two">
<img src="img/02.jpg" alt="">
</div>
<div class="box" id="three">
<img src="img/03.jpg" alt="">
</div>
</div><!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$('#tab a').on('click',function(){
$(this).parent('li').addClass('current').siblings('li').removeClass('current');

let target = $(this).attr('href');
console.log(target);
$(target).addClass('current').siblings('.box').removeClass('current');
});
});
</script>
</body>
</html>