くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]タブパネル①

f:id:pleasure10501:20150511173117p:plainYaho!!の検索バーの真下に使われているようなタブパネルをつくります

 

 

まず、HTMLとCSSを書きましょう

 

 

[HTML]

<div id="container">
<ul class="tab">
<li><a href="#tab1" class="selected">JavaScript</a></li>
<li><a href="#tab2">CSS</a></li>
<li><a href="#tab3">HTML</a></li>
<li><a href="#tab4">jQuery</a></li>
<li><a href="#tab5">PHP</a></li>
</ul>
<ul class="panel">
<li id="tab1">Lorem ipsum dolor (中略) nec ligula. </li>
<li id="tab2">Nam cursus molestie erat, (中略) sed quis ipsum. </li>
<li id="tab3">Pellentesque in metus leo. (中略)pharetra eu, feugiat eu velit. </li>
<li id="tab4">Vestibulum a quam (中略)blandit vel ut erat. In hac . </li>
<li id="tab5">Vestibulum consequat (中略) suscipit porta. </li>
</ul>
</div>

タブとパネルをそれぞれunorder listで並べます。

タブのリンクは、#に続きパネルのid名をつけます。(ここポイント)
※テキストの説明では「a要素のhref属性に#をつけたページ内リンク」で、「パネルのid属性と紐づけている」のだそう。

 

CSS

html, body, div, ul, li, a {
    margin: 0;
    padding: 0;
}

#container{
    width:500px;
    margin:50px auto;
}

ul.tab{
    padding:0;
}

ul.tab li{
    list-style-type:none;
    width:100px;
    height:40px;
    float:left;
}

ul.tab li a{
    outline:none;
    background:url("tab.jpg");
    display:block;
    color:blue;
    line-height:40px;
    text-align:center;
}

ul.tab li a.selected{
    background:url("tab_selected.jpg");
    text-decoration:none;
    color:#333;
    cursor:default;
}

ul.panel{
    clear:both;
    border:1px solid #9FB7D4;
    border-top:none;
    padding:0;
}

ul.panel li{
    list-style-type:none;
    padding:10px;
    text-indent:1em;
    color:#333;
}

 

HTMLとCSSまで実装した状態 ↓

f:id:pleasure10501:20150511174012p:plain

 

jQuery

$(function(){
    $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()                 
    $("ul.tab li a").click(function(){                                     
        $("ul.tab li a.selected").removeClass("selected");          
        $(this).addClass("selected");                    
        $("ul.panel li").hide('fast');                        
        $($(this).attr("href")).show('fast');      
        return false;
    });
});

2行目:初期表示 クラス名selected以外のパネルを非表示にする
3行目:タブをクリックした場合の動作を以下のように設定する
4行目:クラス名selectedが付いているタブのクラス名を削除する
5行目:クリックしたタブ(ul.tab li a)にクラス名selectedを付与する
6行目:selected以外のパネルを非表示にする
7行目:クリックされたタブ(this)のa要素のhref属性を読み出し、値と同じid属性のパネルを表示する

 

 

 

広告を非表示にする