課題 mobileFirst / jQuery selector

.parent()

.siblings 複数形ですね

• 親でなく、子でなく、兄弟姉妹の関係。

1. クリックする部分が、「tab」
2. 「tab」は<ul>と<li>で作る。<ul class="tab">。
3. クリックするのはいつも<li>でなく<a>。リンクは<a>で作る。
4. $(.tab a).on('click', function(){};)
5. 現在表示されているpanelに「current」クラスをつける。
6. そのpanelにリンクするtabにも　<li class="current">「current」クラスをつける。
7. tabをクリックすると、クリックされたタブにcurrent classが移動する。
8. $(.tab a).on('click', function(){$(this).parent().addClass('current').siblings()removeClass('current');};)
9. クリックされた<a>の親である<li>に「current」クラスをつける。
10. クリックされた<a>の親である<li>の兄弟についている「current」クラスを取り除く。
11. クリックされた<a>要素のhref属性を変数化。
12. var currentPanel = $(this).attr('href')
13. $(currentPanel).addClass('current').siblings('.current').removeClass('current');
14. メソッドチェーン。先頭の$(currentPanel)に対して、以下のメソッドを実行する。
15. クリックされた<a>要素にリンクするpanelに「current」クラスをつける。
16. 兄弟要素で、現在「current」クラスがついている要素から「current」を取り除く。

<div class="tabPanel">
<h2>サービスピックアップ</h2>
<ul class="tab">
<li class="current"><a href="#cms">CMS</a></li>
<li><a href="#seo">SEO</a></li>
<li><a href="#social">SOCIAL</a></li>
</ul>

<div class="tabContents">

<div class="panel current" id="cms">
<img src="img/img_pickup_cms.png" width="200" height="140" alt=""/>
<p>低価格＆高機能なCMS導入。<br>充実の管理画面でサイト運用を効率的に。</p>
</div><!--cms-->

<div class="panel" id="seo">
<img src="img/img_pickup_seo.png" width="200" height="140" alt=""/>
<p>検索ワードを短期間で上位表示。<br>
スマートフォンサイトにも対応します。</p>
</div><!--seo-->

<div class="panel" id="social">
<img src="img/img_pickup_social.png" width="200" height="140" alt=""/>
<p>Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。</p>
</div><!--social-->

</div><!--tabContents-->
</div><!--tabPanel-->

.tabPanel{
background: #000080;
color: white;
}
.tabPanel h2{
line-height: 2.4;
}
ul.tab{
width: 100%;
overflow: hidden;
height: 40px;
}
ul.tab>li a{
display: block;
line-height: 40px;
text-align: center;
width: 33.333%;
background: #777777;
border: 1px solid #eeeeee;
border-radius: 6px 6px 0 0;
color: #eeeeee;
float: left;
box-sizing: border-box;
}
.tab>li.current a{
background: #eeeeee;
color: #777777;
border: 1px solid #eeeeee;
border-radius: 6px 6px 0 0 ;
box-sizing: border-box;
}
.tabContents{
text-align: center;
}
.tabContents>.panel{
display: none;
}
.tabContents>.current{
display: block;
}

$(function(){
$('.tab a').on('click',function(){
$(this).parent().addClass('current').siblings('.current').removeClass('current');
var currentPanel=$(this).attr('href');
$(currentPanel).addClass('current').siblings('.current').removeClass('current');
return false;
});
});