html tab效果实现

实现效果：

1. css代码（对样式的规定，可根据实际情况修改）

.hexin-titles{height:36px; background-color:#dcdcdc;}
.hexin-titles ul li{float:left;width:90px; line-height:36px; border-bottom:2px solid #bc111a; display:block; text-align:center; color:#bc111a; font-size:18px;margin-right:20px;cursor:pointer}
.hexin-titles ul li.sec{ background-color:#bc111a; color:#FFFFFF;}
.nrog_oo{ width:100%; height:196px; background-color:#eeeeee; margin-top:10px;}
.nrog_oo_img{margin-top:75px; margin-left:13px;margin-right:12px;cursor:pointer}
.nrog_oo_01{ float:left;width:200px; height:156px; background:url(../img/ship_04.png)top left no-repeat; margin-top:20px; margin-right:10px;margin-left:10px}
.nrog_oo_01 p{ line-height:38px; font-size:20px; color:#FFFFFF; margin-left:20px;}
.nr_oa{ width:160px; height:70px; margin:10px 0px 0px 20px;;}

2.html部分代码

<div id="hexin-titles" class="hexin-titles">
<ul>
<li class="sec" onmouseover="showTabTail('hexin',this)">核心模式</li>
<li onmouseover="showTabTail('moshi',this)">模式</li>
<li onmouseover="showTabTail('vis',this)">VIS系统</li>
</ul>
<div class="cls"></div>
</div>
<div id="hexin" class="nrog_oo" style="display:block">

核心模式显示的内容
<div class="cls"></div>
  </div>

<div id="moshi" class="nrog_oo" style="display:none">
      模式显示的内容
  <div class="cls"></div>
 </div>
<div id="vis" class="nrog_oo" style="display:none">
VIS系统显示的内容
  <div class="cls"></div>
 </div>

3. JS部分代码（可写在html或者js中）

<script type="text/javascript">
function showTabTail(type,obj){
$("#hexin-titles li").removeClass("sec");
$(obj).addClass("sec");
if(type=="hexin"){
$("#hexin").show();
$("#moshi").hide();
$("#vis").hide();
}else if(type=="moshi"){
$("#hexin").hide();
$("#moshi").show();
$("#vis").hide();
}else{
$("#hexin").hide();
$("#moshi").hide();
$("#vis").show();
}
}

</script>