<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">時(shí)事</li>
            <li>體育</li>
            <li>娛樂</li>
        </ul>
    </div>
    <div class="tab_box">
         <div>時(shí)事</div>
         <div class="hide">體育</div>
         <div class="hide">娛樂</div>
    </div>
</div>

*{
margin:0;
padding:0;
}
.tab{
    width:240px;
    margin:50px;
    /*border:1px solid;*/
}
.tab_menu{
    clear:both;
}
.tab_menu li{
    float:left;  //將導(dǎo)航頭左飄
    text-align:center;  //將文字居中
    list-style:none;  //去除標(biāo)記符號(hào)
    background:#F1F1F1; //設(shè)置默認(rèn)背景色
    border:1px solid #898989; //設(shè)置邊框色
    margin-right:4px; //每個(gè)li之間的距離為4px
    cursor:pointer;  //鼠標(biāo)浮上之后，會(huì)有小手的標(biāo)示出現(xiàn)
    padding:1px 6px; //控制li的內(nèi)部距離
    border-bottom:none;

}
.tab_menu li.hover{
    background:#DFDFDF;
}
.tab_menu li.selected{//為選中的選項(xiàng)加背景與顏色
    color:#FFF;
    background:#6D84B4;
}
.tab_box{
    clear:both; //清楚float效果的影響
    height:100px; //設(shè)置高度為100px
    border:1px solid #898989; //設(shè)置內(nèi)容體的邊框樣式
}
.hide{//隱藏需要隱藏的內(nèi)容div
    display:none;
}

<script type='text/javascript'>
$(function(){
    //1.點(diǎn)擊時(shí)改變css屬性，移除之前的selected選項(xiàng)，添加新的selected選項(xiàng)
    //2.隱藏之前的div層，顯示對(duì)應(yīng)得div層
    //為導(dǎo)航中的li注冊(cè)點(diǎn)擊事件
    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=='時(shí)事')
        {
            $('.tab_box div:contains("時(shí)事")').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>

<script type="text/javascript" >
//<![CDATA[
    $(function(){
        var $div_li =$("div.tab_menu ul li");
        $div_li.click(function(){
            $(this).addClass("selected")            //當(dāng)前<li>元素高亮
                   .siblings().removeClass("selected");  //去掉其它同輩<li>元素的高亮
            var index =  $div_li.index(this);  // 獲取當(dāng)前點(diǎn)擊的<li>元素 在 全部li元素中的索引。
            $("div.tab_box > div")       //選取子節(jié)點(diǎn)。不選取子節(jié)點(diǎn)的話，會(huì)引起錯(cuò)誤。如果里面還有div
                    .eq(index).show()   //顯示 <li>元素對(duì)應(yīng)的<div>元素
                    .siblings().hide(); //隱藏其它幾個(gè)同輩的<div>元素
        })
    })
//]]>
</script>