网页选项卡（简洁写法）

在一本书中，发现了一个关于选项卡的简洁思路（只需三行代码），分享一下：
//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');
})

效果如下：