js 点击标题显示/隐藏层内内容(任意数量,可设css)

1

<SCRIPT src="tabcontrol.js" type=text/javascript></SCRIPT>
2

3

</HEAD>
4

<BODY>
5

6

<DIV id=tabControl>
7

<DIV id=1 titletext="基本资料">
8

11
9

</DIV>
10

<DIV id=2 titletext="屏幕参数">1</DIV>
11

</DIV>
12

<SCRIPT type=text/javascript>
13

var _tabControl=CreateTabControl("tabControl",false);
14

_tabControl.pageClassName="TabPage";
15

_tabControl.init();
16

</SCRIPT>
17

</BODY></HTML>

js

js
1

function TabControl(id)
2

{
3

var This=this;
4

this.id=id;
5

this.element=document.getElementById(id);
6

this.items=[];
7

this.allHidden=false;
8

this.titlePanelClassName="";//标题面板 Class Name
9

this.titleButtonClassName="";//标题按钮 Class Name
10

this.activatedTitleButtonClassName=""//活动页的标题按钮 ClassName
11

this.lastPageTitleButtonClassName="";//最后一页标题按钮 Class Name
12

this.lastPageActivatedTitleButtonClassName="";//最后一页活动页的标题按钮 Class Name
13

this.pageClassName="";//页 Class Name
14

this.tabClickHandler=null;
15

16

this.show=function(tabPage)
17

{
18

for(var i=0;i<This.items.length;i++)
19

{
20

if(This.items[i].id!=tabPage.id)
21

{
22

This.items[i].hidden();
23

}
24

else
25

{
26

This.items[i].show();
27

}
28

}
29

}
30

31

//初化化
32

this.init=function()
33

{
34

//读取加载页
35

var divs=This.element.getElementsByTagName("DIV");
36

var tabPages=[];
37

for(var i=0;i<divs.length;i++)
38

{
39

if(divs[i].parentNode==This.element)
40

tabPages[tabPages.length]=divs[i];
41

}
42

43

for (var i = 0; i<tabPages.length; i++) {
44

var tabPage = tabPages[i];
45

46

This.items[This.items.length]=tabPage;
47

48

if(!tabPage.className)
49

{
50

tabPage.className=This.pageClassName;
51

}
52

53

if(!tabPage.titleButtonClassName)
54

tabPage.titleButtonClassName=tabPage.titlebuttonclassname;
55

if(!tabPage.titleButtonClassName)
56

tabPage.titleButtonClassName=tabPage.TitleButtonClassName;
57

58

if(!tabPage.activatedTitleButtonClassName)
59

tabPage.activatedTitleButtonClassName=tabPage.activatedTitleButtonClassName;
60

if(!tabPage.activatedTitleButtonClassName)
61

tabPage.activatedTitleButtonClassName=tabPage.ActivatedTitleButtonClassName;
62

63

64

if(!tabPage.titleButtonClassName)
65

{
66

if(i<tabPages.length-1)
67

tabPage.titleButtonClassName=This.titleButtonClassName;
68

else
69

tabPage.titleButtonClassName=This.lastPageTitleButtonClassName;
70

}
71

72

if(!tabPage.activatedTitleButtonClassName)
73

{
74

if(i<tabPages.length-1)
75

tabPage.activatedTitleButtonClassName=This.activatedTitleButtonClassName;
76

else
77

tabPage.activatedTitleButtonClassName=This.lastPageActivatedTitleButtonClassName;
78

}
79

80

tabPage.isShow=function()
81

{
82

return this.style.display!="none";
83

}
84

85

tabPage.hidden=function()
86

{
87

this.style.display="none";
88

this.titleButton.className=this.titleButtonClassName;
89

if(This.allHidden)
90

this.titleButton.innerHTML=this.titletext+"▲";
91

92

}
93

tabPage.show=function()
94

{
95

this.style.display="";
96

this.titleButton.className=this.activatedTitleButtonClassName;
97

if(This.allHidden)
98

this.titleButton.innerHTML=this.titletext+"▼";
99

}
100

}
101

102

//初始化标题面板;
103

var titlePanel=document.createElement("DIV");
104

This.element.insertBefore(titlePanel,This.element.firstChild);
105

titlePanel.className=This.titlePanelClassName;
106

107

//初始化标题按钮
108

for(var i=0;i<This.items.length;i++)
109

{
110

var div=document.createElement("DIV");
111

titlePanel.appendChild(div);
112

This.items[i].titleButton=div;
113

114

div.index=i;
115

div.innerHTML=This.items[i].titletext;
116

117

div.onclick=function()
118

{
119

if(This.tabClickHandler!=null)
120

{
121

var bool1=eval(This.tabClickHandler+"(this);");
122

if(bool1)return;
123

}
124

if(This.allHidden&&This.items[this.index].isShow())
125

{
126

This.items[this.index].hidden();
127

}
128

else
129

{
130

This.show(This.items[this.index]);
131

132

}
133

}
134

135

}
136

137

var clearDiv=document.createElement("DIV");
138

titlePanel.appendChild(clearDiv);
139

clearDiv.style.clear="both";
140

141

//初始呈现状态
142

for(var i=0;i<This.items.length;i++)
143

{
144

if(This.allHidden||(!This.allHidden&&i>0))
145

This.items[i].hidden();
146

else if(i==0)
147

This.show(This.items[0]);
148

}
149

}
150

}
151

152

function CreateTabControl(id,allHidden,style)
153

{
154

if(!allHidden)allHidden=false;
155

if(!style)style="Default";
156

157

var tabControl=new TabControl(id);
158

tabControl.titlePanelClassName=style+"_TitlePanel";
159

tabControl.titleButtonClassName=style+"_TitleButton";
160

tabControl.activatedTitleButtonClassName=style+"_ActivatedTitleButton";
161

tabControl.lastPageTitleButtonClassName=style+"_LastPageTitleButton";
162

tabControl.lastPageActivatedTitleButtonClassName=style+"_LastPageActivatedTitleButton";
163

tabControl.pageClassName=style+"_Page";
164

tabControl.allHidden=allHidden;
165

return tabControl;
166

}

源码

相关阅读:
YII中表单验证
YII中的表单挂件
YII数据库操作（CURD操作）
YII中的session和cookie
YII中面包屑制作(当前位置：网站首页 >> 会员登陆)
ios NSFileManager 用法详解
iOS沙盒路径的查看和使用
iOS7改变状态栏文字颜色
iOS常用第三方库 -转
Linux下mysql新建账号及权限设置各种方式总结

原文地址：https://www.cnblogs.com/zwl12549/p/1245122.html