小白之选项卡

Posted 2020-10-19 莫小龙

小白之选项卡

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