网页选项卡（简洁写法）

在一本书中，发现了一个关于选项卡的简洁思路（只需三行代码），分享一下：
//css部分

.li_ys li{
        display:inline-block; 
        float:left; 
        text-align:center;
        line-height:30px; 
        font-size:1em; 
        font-weight:bold; 
        color:blue;
        width:100px;
        height:30px;
        overflow:hidden;
        border:1px solid red;
        margin-left:5px;
        margin-top:2px;
    }
    .selected{
        background:cyan;
    }
    .hover{
        background:#ccc;
    }
    .tab_box div{
        border:1px solid red;
        height:150px;
        width:500px;
    }
    .hide{
        display:none;
    }

//html部分

<fieldset>
    <legend>网页选项卡</legend>
    <div class="tab">
        <div class="tab_menu">
            <ul class="li_ys">
                <li class="selected">诗</li>
                <li>词</li>
                <li>歌</li>
                <li>赋</li>
            </ul>
        </div>
        <div class="tab_box" style="clear:both;">
            <div>诗</div>
            <div class="hide">词</div>
            <div class="hide">歌</div>
            <div class="hide">赋</div>
        </div>
    </div>
</fieldset>

//jQuery代码

$('div.tab li').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
    var xuhao=$(this).index();
    $('div.tab_box div').eq(xuhao).show().siblings().hide();
}).hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
})

效果如下：