jQueryのタブの簡単な実現

jQueryはタブ機能を実現します。まずインタフェースを構築します。
カーナビヘッドtab_がありますmenu、内容tab_もあります。box
実現する効果は、クリックした後、該当する内容を表示し、他の内容を隠します。
選択した状態を表示するために、選択した項目に背景を付けて区別します。
今回、私は自分でコードを书いて、先にこれを読みました。

<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">  </li>
            <li>  </li>
            <li>  </li>
        </ul>
    </div>
    <div class="tab_box"> 
         <div>  </div>
         <div class="hide">  </div>
         <div class="hide">  </div>
    </div>
</div>

.htmlの中で、大きなdivが必要です。menuは、コンテンツ体としてtab_。boxcssコードはファイルの内容を担当しています。
css部分：

*{
margin:0;
padding:0;
}
.tab{
    width:240px;
    margin:50px;
    /*border:1px solid;*/
}
.tab_menu{
    clear:both;
}
.tab_menu li{
    float:left;  //      
    text-align:center;  //     
    list-style:none;  //      
    background:#F1F1F1; //       
    border:1px solid #898989; //     
    margin-right:4px; //  li      4px
    cursor:pointer;  //      ，         
    padding:1px 6px; //  li     
    border-bottom:none; 

}
.tab_menu li.hover{
    background:#DFDFDF;
}
.tab_menu li.selected{//            
    color:#FFF; 
    background:#6D84B4;
}
.tab_box{
    clear:both; //  float     
    height:100px; //     100px
    border:1px solid #898989; //          
}
.hide{//         div
    display:none;
}

レイアウトが完成したら、jQueryの動作を行います。

<script type='text/javascript'>
$(function(){
    //1.     css  ，     selected  ，    selected  
    //2.     div ，     div 
    //     li      
    var $div_li = $(".tab_menu ul li");
    $div_li.click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
        //var index = $div_li.index(this);
        //$("div.tab_box > div").eq(index).show().siblings().hide();
        var text = $(this).text();
        if(text=='  ')
        {
            $('.tab_box div:contains("  ")').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='  ')
        {
            $('.tab_box div:contains("  ")').removeClass('hide').siblings().addClass('hide');
        }
        if(text=='  ')
        {
            $('.tab_box div:contains("  ")').removeClass('hide').siblings().addClass('hide');
        }
    }).hover(function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");
        });
});
</script>

これは私が書いたjQueryコードです。私の考えはタブをクリックする時に、selectedパターンを追加して、兄弟タブのselectedパターンを削除します。
もう一つは、どうやって対応するtab_を触発することができますか？ボックスの中身の隠しと表示は？
彼らは対応する内容があることを発見しました。つまり、オプションの頭が「事実」の対応のオプション体も「事実」で、オプションの頭が「スポーツ」の対応のオプションが「スポーツ」などです。
まずオプションのヘッダの内容を取得して判断して、違う値にすると、違った効果が発生すると思います。
効果は実現しましたが、バグは明らかです。すべてのタブがタイトルであるわけではないので、コンテンツ体に対応しています。
下記のコードを見てください。

<script type="text/javascript" >
//<![CDATA[
    $(function(){
        var $div_li =$("div.tab_menu ul li");
        $div_li.click(function(){
            $(this).addClass("selected")            //  <li>    
                   .siblings().removeClass("selected");  //      <li>     
            var index =  $div_li.index(this);  //        <li>       li      。
            $("div.tab_box > div")       //     。        ，     。      div 
                    .eq(index).show()   //   <li>     <div>  
                    .siblings().hide(); //         <div>  
        })
    })
//]]>
</script>

ここの処理は特に巧妙で、liのインデックスを取得することによって、オプション体を処理します。隠れた対応関係を巧みに利用したのがインデックス値です。
オプションヘッドとオプション体の内容が対応していなくても、連動効果は同じです。
今回の練習を通して、自分で頭を使って考えたらいいと思います。考え方の違いを見つけてこそ、足りないことを発見し、差を知ることができます。時には甚だしきに至ってはあなたの考えももっと良いです。