实用的同一页面多选项卡滑动门代码
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>实用的同一页面多选项卡滑动门代码 - www.webdm.cn</title>6
<style>
7
*{}{ padding:0px; margin:0px; font-size:12px}8
.m{}{ width:620px; margin:0 auto;}9
.xx{}{ width:300px; border:1px solid #ccc; float:left}10
.xx2{}{width:300px; border:1px solid #ccc; float:right}11
.t{}{}12
.t ul{}{ list-style:none; border-bottom:1px solid #ccc; height:20px; line-height:20px; background:#eee; padding-left:5px;}13
.t ul li{}{ float:left; width:80px; text-align:center;}14
.t ul li a{}{ display:block; text-decoration:none;}15
.b{}{ padding:10px;}16
.b ul{}{ display:none;}17
.s5{}{ height:5px;}18
.o{}{ bottom:-1px; background:#FFFFFF; position:relative; z-index:1000; padding-top:1px; border:1px solid #ccc; border-bottom:0px; font-weight:bold}19
.block{}{display:block; }20
.cl{}{ clear:both}21
</style>22
<script>23
<!--24
/**//*第一种形式 第二种形式 更换显示样式*/25
function setTab(m,n){26
var tli=document.getElementById("menu"+m).getElementsByTagName("li");27
var mli=document.getElementById("main"+m).getElementsByTagName("ul");28
for(i=0;i<tli.length;i++){29
tli[i].className=i==n?"o":"";30
mli[i].style.display=i==n?"block":"none";31
}32
}33
34
</script>35
</head>36
37
<body>38
<div class="s5"></div>39
<div class="m">40
<div class="xx">41
<div class="t">42
<ul id="menu0">43
<li class="o" onmousemove="setTab(0,0)" >ASP</li>44
<li onmousemove="setTab(0,1)">PHP</li>45
</ul>46
</div>47
<div class="b" id="main0">48
<ul class="block">49
<li>ASP内容</li>50
</ul>51
<ul>52
<li>PHP内容</li>53
</ul>54
</div>55
</div>56
<div class="xx2">57
<div class="t">58
<ul id="menu1">59
<li class="o" onmousemove="setTab(1,0)" >菜单一</li>60
<li onmousemove="setTab(1,1)">菜单二</li>61
</ul>62
</div>63
<div class="b" id="main1">64
<ul class="block">65
<li>菜单一的内容</li>66
</ul>67
<ul>68
<li>菜单二的内容</li>69
</ul>70
</div>71
</div>72
</div>73
<div class="cl"></div>74
<div class="s5"></div>75
<div class="m">76
<div class="xx">77
<div class="t">78
<ul id="menu3">79
<li class="o" onmousemove="setTab(3,0)" >选项一</li>80
<li onmousemove="setTab(3,1)">选项二</li>81
<li onmousemove="setTab(3,2)">选项三</li>82
</ul>83
</div>84
<div class="b" id="main3">85
<ul class="block">86
<li>内容</li>87
</ul>88
<ul>89
<li>内容2</li>90
</ul>91
<ul>92
<li>内容3</li>93
</ul>94
</div>95
</div>96
<div class="xx2">97
<div class="t">98
<ul id="menu4">99
<li class="o" onmousemove="setTab(4,0)" >选项一</li>100
<li onmousemove="setTab(4,1)">选项二</li>101
</ul>102
</div>103
<div class="b" id="main4">104
<ul class="block">105
<li>内容</li>106
</ul>107
<ul>108
<li>内容2</li>109
</ul>110
</div>111
</div>112
</div>113
</body>114
</html>115
116
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！