.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();//显示当前选项卡
});
});