样式:
.undis{display:none;}
.dis{display:block;}
.ontac {text-decoration: none; font:bold 12px/34px "宋体";color: #FF6600;display:block;text-align: center;background: url(images/ex1_06.gif) center no-repeat; height:37px;}
JS部分:
<script type="text/javascript" language="javascript">
<!--
function g(o){return document.getElementById(o);}
function HoverLi(n)
{
for(var i=1;i<=6;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
g('tbc_0'+n).className='dis';g('tb_'+n);
if(n==1){
g('tb_'+1).className='ontac';
g('tb_'+2).className="";
g('tb_'+3).className="";
g('tb_'+4).className="";
g('tb_'+5).className="";
g('tb_'+6).className="";
}
if(n==2){
g('tb_'+1).className="";
g('tb_'+2).className='ontac';
g('tb_'+3).className="";
g('tb_'+4).className="";
g('tb_'+5).className="";
g('tb_'+6).className="";
}
if(n==3){
g('tb_'+1).className="";
g('tb_'+2).className="";
g('tb_'+3).className='ontac';
g('tb_'+4).className="";
g('tb_'+5).className="";
g('tb_'+6).className="";
}
if(n==4){
g('tb_'+1).className="";
g('tb_'+2).className="";
g('tb_'+3).className="";
g('tb_'+4).className='ontac';
g('tb_'+5).className="";
g('tb_'+6).className="";
}
if(n==5){
g('tb_'+1).className="";
g('tb_'+2).className="";
g('tb_'+3).className="";
g('tb_'+4).className="";
g('tb_'+5).className='ontac';
g('tb_'+6).className="";
}
if(n==6){
g('tb_'+1).className="";
g('tb_'+2).className="";
g('tb_'+3).className="";
g('tb_'+4).className="";
g('tb_'+5).className="";
g('tb_'+6).className='ontac';
}
}
//-->
</script>
页面部分:
导航:
<div id="tb_1" align="center" class="ontac">基本信息</div>
<div id="tb_2" align="center">学历信息</div>
<div id="tb_3" align="center">技能信息</div>
<div id="tb_4" align="center">履历信息</div>
<div id="tb_5" align="center">合同信息</div>
<div id="tb_6" align="center">档案信息</div>
具体内容:
<div class="dis" id="tbc_01">111<div>
<div class="undis" id="tbc_02">222<div>
<div class="undis" id="tbc_03">333<div>
<div class="undis" id="tbc_04">444<div>
<div class="undis" id="tbc_05">555<div>
<div class="undis" id="tbc_06">666<div>
说明:我只是把主要的地方抠出来了,自己写的,有些粗糙,希望大家不要见笑,
详细的见附件
其中“onmouseover”可以改为“onmouseclick”
大家有收藏的常用JS也都发来分享哈~~~~~
共同进步才是真的进步
[
本帖最后由 yuherobin 于 2008-9-15 15:19 编辑 ]