Jquery实现的Tabs标签页简洁版

.help_menu{ height:42px; width:720px; background:url(/images/linebg2_03.png) repeat-x bottom left; overflow:hidden;  border-left:1px solid #dfdfdf;}
.help_menu p{ float:left; height:42px; border-right:1px solid #dfdfdf; }
.help_menu p a{ display:block; height:40px; padding:0 20px; line-height:40px; font-size:14px; font-weight:bold; color:#333;border-top:1px solid #dfdfdf; }
.help_menu p a:hover{height:40px; border-top:2px solid #ff4c00; background:#fff; color:#ff4c00;}
.help_menu p .mo11{height:40px; border-top:2px solid #ff4c00; background:#fff;  color:#ff4c00;}
.help_conten{ width:678px; padding:20px 20px 120px 20px; overflow:hidden; border:1px solid #dfdfdf;border-top:none;}
.hide{display:none;}

放大下载图片

linebg2_03.png

​​download - jquery-1.8.3.min.js ​​

<!--分类-->
<div class="help_menu">
    <p><a href="javascript:" class="mo11">帮助中心</a></p>
    <p><a href="javascript:">网站地图</a></p>
    <p><a href="javascript:">意见反馈</a></p>
</div>

<!--帮助中心正文-->
<div class="help_conten">
     帮助中心
</div>
<!--网站地图正文-->
<div class="help_conten hide">
     网站地图
</div>
<!--意见反馈正文-->
<div class="help_conten hide">
     意见反馈
</div>

$(function () {
    $(".help_menu p").bind("mouseover", function () {
        var index = $(this).index();//当前页索引
        $(".help_menu p a").removeClass("mo11");//全部选项卡设置为未选中
        $(this).find("a").addClass("mo11");//当前选项卡选中
        $(".help_conten").hide();//隐藏所有选项卡
        $(".help_conten").eq(index).show();//显示当前选项卡
    });
});