小白之選項卡

html：

<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>

jquery：

<script type=‘text/javascript‘>
$(function(){
    var $div_li = $(".tab_menu ul li");
    $div_li.click(function(){
        $(this
 
).addClass(‘selected‘).siblings().removeClass(‘selected‘);
        var text = $(this).text();
        if(text==‘時事‘)
        {
            $(‘.tab_box>div:nth-child(1)‘).removeClass(‘hide‘).siblings().addClass(‘hide‘);
        }
        if(text==‘體育‘)
        {
            $(‘.tab_box>div:nth-child(2)‘).removeClass(‘hide‘).siblings().addClass(‘hide‘);
        }
        
 
if(text==‘娛樂‘)
        {
            $(‘.tab_box>div:nth-child(3)‘).removeClass(‘hide‘).siblings().addClass(‘hide‘);
        }
    }).hover(function(){
            $(this).addClass("hover");
        },function(){
            $(this).removeClass("hover");
        });
});
</script>

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; 
    cursor:pointer;  
    padding:1px 6px;
    border-bottom:none; 

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

參考自：http://www.jb51.net/article/47387.htm

小白之選項卡