jquery实现简单的选项卡功能

html部分

<ul id="pro_menu">
<li class="tabFocus">菜单一</li>
<li id="jjb">菜单二</li>
<li id="dydb">菜单三</li>
<li id="dydb">菜单四</li>
</ul>
<ul id="pro_content">
<li>这是菜单一的内容</li>
<li>这是菜单二的内容</li>
<li>这是菜单三的内容</li>
<li>这是菜单四的内容</li>
</ul>

css部分

*{
margin:0px;
padding:0px;
}
ul li{
list-style-type:none;
}
#pro_menu{
width:400px;
height:30px;
border:1px solid #FDCD3D;
background:#fff;
color:#FDCD3D;
margin-top:10px;
}
#pro_menu li{
width:25%;
float:left;
height:30px;
line-height:30px;
text-align:center;
}
.tabFocus{
background:#FDCD3D;
color:#fff;
}
#pro_content{
width:400px;
height:200px;
background:#FDCD3D;
border:1px solid #FDCD3D;
}

jquery部分

    $(function(){
        $("#pro_menu li").each(function(index){//遍历
if($(this).hasClass("tabFocus")){
            $("#pro_content>li").eq(index).show().siblings().hide();

        };//初始默认显示一个，其他隐藏
        $(this).click(function(){
            $(this).addClass("tabFocus").siblings().removeClass("tabFocus");//选中高亮，其他菜单取消高亮
            $("#pro_content>li").eq(index).show().siblings().hide();//选中菜单，出现对应的内容
        });
        })  
    })