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();//選中選單，出現對應的內容
        });
        })  
    })