【授業メモ】jQuery traversingとタブパネル
traversingを使ったタブパネル
Traversingのメリット
トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」から見てどういう関係性にある「要素」、という形で指定する事ができます。jQueryを使う上で非常に大事な考え方なので、しっかりと理解しましょう。
this（自分）が何で、自分から見て命令したい相手がどういう関係なのか理解する。
自分から見た相手に届くまで、命令をしていくだけ。
childrenメソッド
childrenメソッドを利用すれば「セレクタ：>（子要素）」と同じようなことが可能です。
★記述例：buttonから見たいとこのp（buttonの兄弟の子供）に命令を効かせたい
<script>
$(function(){
$('button').on('click',function(){
$(this).siblings('div').children('p').css('background','orange');
});
});
</script>
parentメソッド
指定した要素の「親」要素を選択します。親要素とは階層構造（入れ子構造）において直上にある要素のことです。
名前が似ているparentsメソッドはparentメソッドと異なり「先祖」要素も選択します。
siblingsメソッド
指定した要素の兄弟要素（同じ階層の要素）を選択します。引数を設定しない場合はすべての兄弟要素を選択します。
★記述例：クリックしたボタンのpだけの色を変えたい buttonとpが兄弟の場合
<script>
$(function(){
$('button').on('click',function(){
$(this).siblings('p').css('background','orange');
});
});
</script>
★応用記述例 疑似クラスを付ける
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('button').on('click',function(){
$(this).parent('div').siblings('div').children('p:nth-child(1)').css('background','orange');
});
});
</script>
</head>
<body>
<div class="box">
<div>
<button>button1</button>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
タブパネルを作る
★記述例
point
クリックするのはliのaで、画像の表示を切り替えたいのはdiv class="boxで、それぞれ違う家族。
同じ家族なら命令は簡単だけど、違う家族なので、命令の紐づけが必要になる。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブメニューを作る</title>
<style>
html,body,ul,li,p.h1 {
margin: 0;
padding: 0;
line-height: 1.0;
}
img {
vertical-align: bottom;
border: none;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
#container {
width: 640px;
padding: 10px;
background:#CECEFF;
margin: 30px auto 0;
box-sizing: border-box;
}
.box {
width:620px;
padding:10px;
box-sizing:border-box;
background:#FFFFFF;
display: none;/*クリックされたものだけ表示させたいからまずは隠す*/
}
.box.current {
display: block;/*一枚も出てないとわからないから、最初のやつだけクラス名を付けて表示させる*/
}
h1 {
color:#FFF;
font-size:22px;
font-weight:bold;
padding:10px;
}
ul {
overflow: hidden;
margin: 0 auto;
width: 620px;
}
li {
width: 25%;
float: left;
height: 50px;
background:#6666CC;
border-left:1px solid white;
box-sizing:border-box;
}
li:nth-child(1) {
border-left: none;
}
li a {
color: white;
display:block;
width:100%;
text-align:center;
line-height:50px;
color:#fff;
font-size:14px;
}
li.current a {
background: white;
color:#000066;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#tab li a').on('click',function(){
var tabTarget = $(this).attr('href');//クリックしたaのhrefの値（#季節名）をvarに代入する。このvarは#季節名がついたdivを示す ここでクリックされたaと、同じ名前のdivが紐づく。画像表示切替をしたい要素divは、クリックされた要素と家族関係にないため、紐づけ作業が必要になる。
$(tabTarget).addClass('current').siblings('.current').removeClass('current');//クリックしたaと同じ名前のdivにcurrentをつける→currentがついたdiv以外にclass=currentが付いているものがあったら→currentを削除する
$(this).parent('li').addClass('current').siblings('.current').removeClass('current');//クリックされたaの親要素liにcurrentをつけ、もしそれ以外についていたら外す
return false;//aをクリックするときは必ず入れる クリックイベントの中の一番下に書く
});
});
</script>
</head>
<body>
<div id="container">
<h1>日本の四季</h1>
<ul id="tab">
<li><a href="#spring">春の写真</a></li><!--divとliを紐づけたいからdivと同じ名前を付ける-->
<li class="current"><a href="#summer">夏の写真</a></li>
<li><a href="#autom">秋の写真</a></li>
<li><a href="#winter">冬の写真</a></li>
</ul>
<div class="box current" id="spring">
<p><img src="img/spring.jpg" alt=""></p>
</div>
<div class="box" id="summer">
<p><img src="img/summer.jpg" alt=""></p>
</div>
<div class="box" id="autom">
<p><img src="img/autom.jpg" alt=""></p>
</div>
<div class="box" id="winter">
<p><img src="img/winter.jpg" alt=""></p>
</div>
</div><!--container-->
</body>
</html>
★応用 プラスマイナスメニュー＋traversing
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>traversing応用</title>
<style>
html,ul,li,p,body {
margin: 0;
padding: 0;
line-height: 1.0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
#container {
width: 440px;
margin: 30px auto;
}
.box {
float: left;
width: 220px;
padding: 10px;
box-sizing:border-box;
}
ul {
width: 200px;
}
li {
width: 200px;
height: 50px;
margin-bottom: 10px;
background: #CECEFF;
text-align: center;
line-height: 50px;
}
p {
height: 50px;
width: 200px;
position: relative;/*spanをpの中で真ん中にするための基準点*/
}
p a {
width: 200px;
height: 50px;
background: #00FFFF;
display: block;
}
li:nth-child(n+4){/*liの4と5を指定*/
display: none;/*表示を消してしまう*/
}
/*spanタグの+-*/
span{
dispay:block;
width:40px;
height:4px;
border-radius:3px;
background:#6699FF;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
span:before{/*擬似要素縦の線*/
display:block;
content:"";
width:4px;/*spanと真逆の値を書く*/
height:40px;
background:#6699FF;
border-radius:3px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
transition:0.4s;
}
.close span {
background: transparent;
}
.close span:before {
transform:rotate(90deg);
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('p > a').on('click',function(){
//$('li:nth-child(n+4):not(:animated)').slideToggle(500);//消した4と5をスライドで表示させる
$(this).parent().siblings().children('li:nth-child(n+4):not(:animated)').slideToggle(500);//上と同じことをsiblingsで表示 :not(:animated)はスライドの際必須！
$(this).toggleClass('close');
return false;//aに動きを付けるなら必ず一番下につける
});
});
</script>
</head>
<body>
<div id="container">
<div class="box">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
<p><a href="#"><span></span></a></p>
</div>
<div class="box">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
<p><a href="#"><span></span></a></p>
</div>
</div>
</body>
</html>
