html如何实现tab效果,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部分代码

• 核心模式
• 模式
• VIS系统

核心模式显示的内容

模式显示的内容

VIS系统显示的内容

3. JS部分代码(可写在html或者js中)

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();

}

}