0%

JS 简单实现tab页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<SCRIPT LANGUAGE="JavaScript">
function switch_Tab(objTab)
{
//下面tab对于内容div块的id前缀
f_id="div_box_list_";
li_list=objTab.parentNode.getElementsByTagName("li");
//alert(li_list.length);
//alert(li_list[0]);
tagIndex=-1;
//判断鼠标停留在哪个TAB标签区域
for (i=0;i<li_list.length;i++)
{
if (li_list[i]==objTab)
{
tagIndex=i;
break;
}
}
if (tagIndex==-1)
return;

//根据上面找到停留的标签号,修改要显示对应的div块的display属性:block,不是的标签display属性:none.
for (i=0;i<li_list.length;i++)
{

objTagDiv=document.getElementById(f_id+(i+1));

//id="div_box_list_1"到id="div_box_list_3",是哪一个tab标签
if (tagIndex==i)
{
objTagDiv.style.display='block';
}
else
{
objTagDiv.style.display='none';
}

}

}
</SCRIPT>



<style type="text/css">
#List_Box {
width: 750px;
height: auto;
}

#List_Box #List_Box_top {
height: 29px;
padding: 11px 0px 0px 15px;
}

#List_Box #List_Box_top ul li {
list-style-type: none;
float: left;
height: 21px;
width: 102px;
padding: 8px 0px 0px 28px;
font-weight: bold;
cursor: default;
}

.TAB_List {
width: 720px;
margin: auto;
height: 310px;
}

#list_box_li1,
#div_box_list_1 {
background-color: #99CC66;
}


#list_box_li2,
#div_box_list_2 {
background-color: #FFFF99;
}

#list_box_li3,
#div_box_list_3 {
background-color: #CC3300;
}
</style>
</head>

<body>

<DIV id="List_Box">
<DIV id="List_Box_top">
<UL>
<LI id="list_box_li1" onclick="switch_Tab(this)">TAB:I型</LI>
<LI id="list_box_li2" onclick="switch_Tab(this)">TAB:II型</LI>
<LI id="list_box_li3" onclick="switch_Tab(this)">TAB:III型</LI>
</UL>
</DIV>
<!-- 初始显示由下列属性决定:style="display: block; " -->
<DIV id="div_box_list_1" class="TAB_List" style="display: block; ">
<p>这是标签1<br />TAB:I型</p>
</DIV>
<DIV id="div_box_list_2" class="TAB_List" style="display: none; ">
<p>这是标签2<br />TAB:II型</p>
</DIV>
<DIV id="div_box_list_3" class="TAB_List" style="display: none; ">
<p>这是标签3<br />TAB:III型</p>
</DIV>
</DIV>
</body>

</html>