实用的同一页面多选项卡滑动门代码

最新推荐文章于 2021-06-09 18:08:45 发布

ailao1178

最新推荐文章于 2021-06-09 18:08:45 发布

阅读量198

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/jizhitao/archive/2009/10/13/1582628.html

版权

Code
1

<!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

<title>实用的同一页面多选项卡滑动门代码 - www.webdm.cn</title>
6

<style>

}{ 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

<!--
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

</script>
35

</head>
36

<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> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

转载于:https://www.cnblogs.com/jizhitao/archive/2009/10/13/1582628.html

ailao1178

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫