javascript选项卡
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<title>吉安红十字医院</title>6
<script type="text/javascript">7
function setTab(m,n){
}{8
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /**//*获取选项卡的LI对象*/9
var mul=document.getElementById("main"+m).getElementsByTagName("ul"); /**//*获取主显示区域对象UL*/10
for(i=0;i<tli.length;i++){11
/**//*先判断i==n*/12
tli[i].className=i==n?"hover":"";/**//*更改选项卡的LI对象的样式，如果选定的项则使用.hover样式*/13
mul[i].style.display=i==n?"block":"none";/**//*确定主区域显示哪一个UL对象*/14
}15
}16
</script>17
<style type="text/css">18
*{}{19
margin:0;20
padding:0;21
}22
img{}{23
border:0;24
}25
body{}{26
27
}28
ul{}{29
list-style-type:none;30
}31
/**//*选项卡*/32
#tab{}{33
background:red;34
margin:20px 0 20px 20px;35
width:500px;36
}37
/**//*选项卡Menu部分*/38
#menu0{}{39
height:22px;40
background:blue;41
}42
#menu0 li{}{43
display:block;44
float:left;45
background:#00FF00;46
line-height:22px;47
margin-right:2px;48
cursor:pointer;49
}50
/**//*51
#menu0 li a{52
display:block;53
background:#FFCCCC;54
}55
*/56
#menu0 li.hover{}{57
background-color:#960d21;58
}59
#main0{}{60
background:#993399;61
}62
/**//*选项卡Main部分*/63
#main0 ul{}{64
display:none;/**//*默认Main部分情况下都不显示,通过添加block样式重写*/65
}66
#main0 ul.block{}{67
display:block;68
}69
</style>70
</head>71
72
<body>73
<div>74
<div id="tab">75
<ul class="menu0" id="menu0">76
<li onmouseover="setTab(0,0)" class="hover"><a href="#">特色技术</a></li>77
<li onmouseover="setTab(0,1)"><a href="#">典型病例</a></li>78
</ul>79
<div class="main0" id="main0">80
<ul class="block">81
<li>慢性盆腔炎 婚后5年不孕</li>82
<li>草率人流 尝不孕恶果</li>83
<li>精索静脉曲张 三年难育的背后凶</li>84
</ul>85
<ul>86
<li>三大对策 攻克女性不孕不育</li>87
<li>联合介入复通术打开生命之路</li>88
<li>中药离子导入法 圆你妈妈梦</li> 89
</ul>90
</div>91
</div>92
</div>93
</body>94
</html>95
浙公网安备 33010602011771号