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();//选中菜单，出现对应的内容
        });
        })  
    })