JS选项卡的问题~
<script>functionShowLayers(n,m){for(i=1;i<=m;i++){eval("content"+i).style.display="no...
<script>
function ShowLayers(n,m)
{
for(i=1;i<=m;i++)
{
eval("content" + i).style.display="none";
eval("title"+i+".style.background=\"ffffff\";");
}
eval("title"+n+".style.background=\"cccccc\";");
eval("content" + n).style.display="";
}
</script>
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
<tr>
<td id="title1" bgcolor="#cccccc"><a onmouseover="javascript:ShowLayers(1,4);">标题1</a></td>
<td id="title2"><a onmouseover="javascript:ShowLayers(2,4);">标题2</a></td>
<td id="title3"><a onmouseover="javascript:ShowLayers(3,4);">标题3</a></td>
<td id="title4"><a onmouseover="javascript:ShowLayers(4,4);">标题4</a></td>
</tr>
<tr>
<td height="100" colspan="5" bgcolor="ffffff">
<div id="content1" style="display:;">
内容1
</div>
<div id="content2" style="display:none;">
<td>内容2 </td>
</div>
<div id="content3" style="display:none;">
内容3
</div>
<div id="content4" style="display:none;">
内容4
</div>
</td>
</tr>
</table>
-----------------------------------
但如果在div里加入表格~那么不论div是否是隐藏状态都会将表格显示出来~
请问是否有其他的解决办法~
还是没解决这个问题嘛~ 展开
function ShowLayers(n,m)
{
for(i=1;i<=m;i++)
{
eval("content" + i).style.display="none";
eval("title"+i+".style.background=\"ffffff\";");
}
eval("title"+n+".style.background=\"cccccc\";");
eval("content" + n).style.display="";
}
</script>
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="ffffff">
<tr>
<td id="title1" bgcolor="#cccccc"><a onmouseover="javascript:ShowLayers(1,4);">标题1</a></td>
<td id="title2"><a onmouseover="javascript:ShowLayers(2,4);">标题2</a></td>
<td id="title3"><a onmouseover="javascript:ShowLayers(3,4);">标题3</a></td>
<td id="title4"><a onmouseover="javascript:ShowLayers(4,4);">标题4</a></td>
</tr>
<tr>
<td height="100" colspan="5" bgcolor="ffffff">
<div id="content1" style="display:;">
内容1
</div>
<div id="content2" style="display:none;">
<td>内容2 </td>
</div>
<div id="content3" style="display:none;">
内容3
</div>
<div id="content4" style="display:none;">
内容4
</div>
</td>
</tr>
</table>
-----------------------------------
但如果在div里加入表格~那么不论div是否是隐藏状态都会将表格显示出来~
请问是否有其他的解决办法~
还是没解决这个问题嘛~ 展开
1个回答
展开全部
Java代码
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5. <title>井底的蛙</title>
6. <script type="text/javascript">
7. /*
8. 选项卡封装
9. by 井底的蛙
10. 2008-2-4
11. */
12. opCard = function()
13. {
14. this.bind = new Array();
15. this.index = 0; //默认显示哪个选项卡，从0开始
16.
17. this.style = new Array(); //["","",""]
18. this.overStyle = false; //选项是否有over, out变换样式事件，样式为this.style[2]
19. this.overChange = false; //内容是否用over, out直接激活
20. this.menu = false; //菜单类型
21. this.nesting = [false,false,"",""]; //是否嵌套，后面2个参数是指定menu,info的子集深度所用id
22.
23. this.auto = [false, 1000]; //自动滚动[true,2000]
24. this.timerID = null; //自动播放的
25. this.menutimerID = null; //菜单延时的
26.
27. this.creat = function(func)
28. {
29. var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
30. var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
31. var my = this, i;
32. var argLen = arguments.length;
33. var arrM = new Array();
34.
35. if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套
36. { // 过滤出需要的数据
37. var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
38. var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
39. }
40. else
41. {
42. var arrMenu = _arrMenu;
43. var arrInfo = _arrInfo;
44. }
45.
46. var l = arrMenu.length;
47. if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要，你可以放一个空的在那占位。")}
48.
49. // 修正
50. if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活
51.
52. // 循环添加各个事件等
53. for(i=0;i<l;i++)
54. {
55. arrMenu[i].cName = arrMenu[i].className;
56. arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]); //加载样式，菜单的话统一样式
57.
58. if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器
59. {
60. if(this.overStyle || this.overChange) // 有over, out 改变样式 或者 激活
61. {
62. arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
63. arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
64. }
65. arrMenu[i].onclick = function(){if(argLen==1){func()}}
66. arrInfo[i].style.display = "none";
67. continue;
68. }
69.
70. if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隐藏初始化，菜单的话全部隐藏
71. arrMenu[i].index = i; //记录自己激活值[序号]
72. arrInfo[i].index = i;
73.
74.
75. if(this.overChange) //有鼠标over, out事件
76. {
77. arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
78. arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}
79. }
80. else //onclick触发
81. {
82. arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}
83. if(this.overStyle) // 有over, out 改变样式
84. {
85. arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
86. arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
87. }
88. else // 没有over, out 改变样式
89. {
90. if(this.auto[0]) // 有自动运行
91. {
92. arrMenu[i].onmouseover = function(){autoStop(this, 0);}
93. arrMenu[i].onmouseout = function(){autoStop(this, 1);}
94. }
95. }
96. }
97.
98. if(this.auto[0] || this.menu) //arrinfo 控制自动播放
99. {
100. arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);}
101. arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}
102. }
103. } //for结束
104.
105. if(this.auto[0])
106. {
107. this.timerID = setTimeout(autoMove,this.auto[1])
108. }
109.
110. // 自动播放
111. function autoMove()
112. {
113. var n;
114. n = my.index + 1;
115. if(n==l){n=0};
116. while(arrMenu[n].getAttribute("skip")) // 需要跳过的容器
117. {
118. n += 1;
119. if(n==l){n=0};
120. }
121. changeOption(arrMenu[n]);
122. my.timerID = setTimeout(autoMove,my.auto[1]);
123. }
124.
125. // onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!!
126. function autoStop(obj, num)
127. {
128. if(!my.auto[0]){return;}
129. //if(obj.index==my.index)
130. num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
131. }
132.
133. // 改变选项卡
134. function changeOption(obj)
135. {
136. arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改旧内容
137. arrInfo[my.index].style.display = "none"; //隐藏旧内容
138.
139. obj.className = getClass(obj,my.style[1]); //修改为新样式
140. arrInfo[obj.index].style.display = ""; //显示新内容
141.
142. my.index = obj.index; //更新当前选择的index
143. }
144.
145. /*
146. 只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活
147. obj：目标对象。 num：1为over，0为out
148. */
149. function changeTitle(obj, num)
150. {
151. if(!my.overStyle){return;};
152. if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
153. }
154.
155. /*
156. 菜单类型时用
157. obj：目标对象。 num：1为over，0为out
158. */
159. function changeMenu(num)
160. {
161. if(!my.menu){return;}
162. num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
163. }
164.
165. //关闭菜单
166. function menuClose()
167. {
168. arrInfo[my.index].style.display = "none";
169. arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);
170. }
171.
172. // 得到className（防止将原有样式覆盖）
173. function getClass(o, s)
174. {
175. if(o.cName==""){return s}
176. else{return o.cName + " " + s}
177. }
178.
179. //嵌套情况下得到真正的子集
180. function getChilds(arrObj, id, num)
181. {
182. var depth = 0;
183. var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]); //得到第一个子集
184. do //计算深度
185. {
186. if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}
187. firstObj = firstObj.parentNode;
188. }
189. while(firstObj.tagName.toLowerCase()!="body") // body强制退出。
190.
191. var t;
192. var arr = new Array();
193. for(i=0;i<arrObj.length;i++) //过滤出需要的数据
194. {
195. t = arrObj[i], d = 0;
196. do
197. {
198. if(t.parentNode.getAttribute("id")==id && d == depth)
199. {
200. arr.push(arrObj[i]);break; //得到数据
201. }
202. else
203. {
204. if(d==depth){break};d+=1;
205. }
206. t = t.parentNode;
207. }
208. while(t.tagName.toLowerCase()!="body") // body强制退出
209. }
210. return arr;
211. }
212. }
213. }
214. window.onload = function()
215. {
216. var aa = new opCard();
217. aa.bind = ["a1","div","b1","div"];
218. aa.style = ["a1_0","a1_1","a1_0"];
219. aa.index = 0;
220. aa.nesting = [false,true,"",""]
221. aa.creat();
222. aa =null;
223.
224. // 默认的onclick中，第一个例子
225. var bba = new opCard();
226. bba.bind = ["a2","li","b2","div"];
227. bba.style = ["style1","style2","style3"];
228. bba.overStyle = true;
229. bba.creat();
230. bba = null;
231.
232. // 默认的onclick中，第二个例子
233. var bbb = new opCard();
234. bbb.bind = ["a3","li","b3","div"];
235. bbb.style = ["style1","style2","style3"];
236. bbb.overStyle = true;
237. bbb.creat();
238. bbb = null;
239.
240. // onmousover触发中的例子
241. var cc = new opCard();
242. cc.bind = ["a4","li","b4","div"];
243. cc.style = ["style1","style2","style3"];
244. cc.overStyle = true;
245. cc.overChange = true;
246. cc.creat();
247. cc = null;
248.
249. //自动播放auto第一个例子
250. var dd = new opCard();
251. dd.bind = ["a5","li","b5","div"];
252. dd.style = ["style1","style2","style3"];
253. dd.auto = [true, 3000];
254. dd.creat();
255. dd = null;
256.
257. //自动播放auto第二个例子
258. var ee = new opCard();
259. ee.bind = ["a6","li","b6","div"];
260. ee.style = ["style1","style2","style3"];
261. ee.auto = [true, 2000];
262. ee.overChange = true;
263. ee.creat();
264. ee = null;
265.
266. //自动播放auto第三个例子
267. var ff = new opCard();
268. ff.bind = ["a7","li","b7","div"];
269. ff.style = ["style1","style2","style3"];
270. ff.auto = [true, 1000];
271. ff.overChange = true;
272. ff.overStyle = true;
273. ff.creat();
274. ff = null;
275.
276. //菜单导航例子
277. var gg = new opCard();
278. gg.bind = ["a8","li","b8","div"];
279. gg.style = ["style1","style2","style3"];
280. gg.overStyle = true;
281. gg.menu = true;
282. gg.creat();
283. gg = null;
284.
285. //其他应用
286. var hh = new opCard();
287. hh.bind = ["a9","li","a9","li"];
288. hh.style = ["style4","style4","style4"];
289. //hh.overStyle = true;
290. hh.auto = [true, 1000];
291. hh.creat();
292. hh = null;
293. }
294. </script>
295. <style type="text/css">
296. body{font-size:12px; font-family:Verdana,"宋体";}
297. p,ul{margin:0px; padding:0px;}
298. td,div{font-size:12px}
299. .a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
300. .a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
301. .test{text-decoration:underline;}
302. #b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
303. #b1 div.s strong{color:#0066FF;}
304. /* */
305. .style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
306. .style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
307. .style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
308. #a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
309. #b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
310. #b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
311. #b8 div a{margin-right:20px;}
312. .style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
313. </style>
314. </head>
315. <body>
316. <table width="100%" border="0" cellspacing="0" cellpadding="0">
317. <tr>
318. <td id="a1" width="140" valign="top" align="center">
319. <div class="test">简单介绍</div>
320. <div class="test">默认的onclick</div>
321. <div class="test">onmousover触发</div>
322. <div class="test">自动播放auto</div>
323. <div class="test">菜单导航</div>
324. <div class="test">关于嵌套</div>
325. <div class="test">其他应用</div>
326. <div class="test">一些说明</div>
327. <div class="test"> </div>
328. <div class="test"> </div>
329. <div class="test"> </div>
330. <div class="test"> </div>
331. </td>
332. <td id="b1" valign="top">
333. <div class="s">
334. 封装了一个选项卡，不过已经不像选项卡了-_-!!!<br><br>
335. 现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些<br><br>
336. <p>
337. <strong>obj.bind = ["a1","td","b1","div"];</strong><br>
338. 绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？<br>
339. td标签的数量和div标签的数量必须相同<br>
340. （若不需要显示内容，只显示菜单话，可以这个在td标签上加<td skip="true">）<br>
341. 如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting<br><br>
342.
343. <strong>obj.nesting = [false,true,"",""];</strong><br>
344. 当标签tag有嵌套时，需要用到这个<br>
太多了，弄不下，自己去这里看吧
http://llying.javaeye.com/blog/173245
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5. <title>井底的蛙</title>
6. <script type="text/javascript">
7. /*
8. 选项卡封装
9. by 井底的蛙
10. 2008-2-4
11. */
12. opCard = function()
13. {
14. this.bind = new Array();
15. this.index = 0; //默认显示哪个选项卡，从0开始
16.
17. this.style = new Array(); //["","",""]
18. this.overStyle = false; //选项是否有over, out变换样式事件，样式为this.style[2]
19. this.overChange = false; //内容是否用over, out直接激活
20. this.menu = false; //菜单类型
21. this.nesting = [false,false,"",""]; //是否嵌套，后面2个参数是指定menu,info的子集深度所用id
22.
23. this.auto = [false, 1000]; //自动滚动[true,2000]
24. this.timerID = null; //自动播放的
25. this.menutimerID = null; //菜单延时的
26.
27. this.creat = function(func)
28. {
29. var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
30. var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
31. var my = this, i;
32. var argLen = arguments.length;
33. var arrM = new Array();
34.
35. if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套
36. { // 过滤出需要的数据
37. var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
38. var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
39. }
40. else
41. {
42. var arrMenu = _arrMenu;
43. var arrInfo = _arrInfo;
44. }
45.
46. var l = arrMenu.length;
47. if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要，你可以放一个空的在那占位。")}
48.
49. // 修正
50. if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活
51.
52. // 循环添加各个事件等
53. for(i=0;i<l;i++)
54. {
55. arrMenu[i].cName = arrMenu[i].className;
56. arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]); //加载样式，菜单的话统一样式
57.
58. if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器
59. {
60. if(this.overStyle || this.overChange) // 有over, out 改变样式 或者 激活
61. {
62. arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
63. arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
64. }
65. arrMenu[i].onclick = function(){if(argLen==1){func()}}
66. arrInfo[i].style.display = "none";
67. continue;
68. }
69.
70. if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隐藏初始化，菜单的话全部隐藏
71. arrMenu[i].index = i; //记录自己激活值[序号]
72. arrInfo[i].index = i;
73.
74.
75. if(this.overChange) //有鼠标over, out事件
76. {
77. arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
78. arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}
79. }
80. else //onclick触发
81. {
82. arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}
83. if(this.overStyle) // 有over, out 改变样式
84. {
85. arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
86. arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
87. }
88. else // 没有over, out 改变样式
89. {
90. if(this.auto[0]) // 有自动运行
91. {
92. arrMenu[i].onmouseover = function(){autoStop(this, 0);}
93. arrMenu[i].onmouseout = function(){autoStop(this, 1);}
94. }
95. }
96. }
97.
98. if(this.auto[0] || this.menu) //arrinfo 控制自动播放
99. {
100. arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);}
101. arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}
102. }
103. } //for结束
104.
105. if(this.auto[0])
106. {
107. this.timerID = setTimeout(autoMove,this.auto[1])
108. }
109.
110. // 自动播放
111. function autoMove()
112. {
113. var n;
114. n = my.index + 1;
115. if(n==l){n=0};
116. while(arrMenu[n].getAttribute("skip")) // 需要跳过的容器
117. {
118. n += 1;
119. if(n==l){n=0};
120. }
121. changeOption(arrMenu[n]);
122. my.timerID = setTimeout(autoMove,my.auto[1]);
123. }
124.
125. // onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!!
126. function autoStop(obj, num)
127. {
128. if(!my.auto[0]){return;}
129. //if(obj.index==my.index)
130. num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
131. }
132.
133. // 改变选项卡
134. function changeOption(obj)
135. {
136. arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改旧内容
137. arrInfo[my.index].style.display = "none"; //隐藏旧内容
138.
139. obj.className = getClass(obj,my.style[1]); //修改为新样式
140. arrInfo[obj.index].style.display = ""; //显示新内容
141.
142. my.index = obj.index; //更新当前选择的index
143. }
144.
145. /*
146. 只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活
147. obj：目标对象。 num：1为over，0为out
148. */
149. function changeTitle(obj, num)
150. {
151. if(!my.overStyle){return;};
152. if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
153. }
154.
155. /*
156. 菜单类型时用
157. obj：目标对象。 num：1为over，0为out
158. */
159. function changeMenu(num)
160. {
161. if(!my.menu){return;}
162. num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
163. }
164.
165. //关闭菜单
166. function menuClose()
167. {
168. arrInfo[my.index].style.display = "none";
169. arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);
170. }
171.
172. // 得到className（防止将原有样式覆盖）
173. function getClass(o, s)
174. {
175. if(o.cName==""){return s}
176. else{return o.cName + " " + s}
177. }
178.
179. //嵌套情况下得到真正的子集
180. function getChilds(arrObj, id, num)
181. {
182. var depth = 0;
183. var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]); //得到第一个子集
184. do //计算深度
185. {
186. if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}
187. firstObj = firstObj.parentNode;
188. }
189. while(firstObj.tagName.toLowerCase()!="body") // body强制退出。
190.
191. var t;
192. var arr = new Array();
193. for(i=0;i<arrObj.length;i++) //过滤出需要的数据
194. {
195. t = arrObj[i], d = 0;
196. do
197. {
198. if(t.parentNode.getAttribute("id")==id && d == depth)
199. {
200. arr.push(arrObj[i]);break; //得到数据
201. }
202. else
203. {
204. if(d==depth){break};d+=1;
205. }
206. t = t.parentNode;
207. }
208. while(t.tagName.toLowerCase()!="body") // body强制退出
209. }
210. return arr;
211. }
212. }
213. }
214. window.onload = function()
215. {
216. var aa = new opCard();
217. aa.bind = ["a1","div","b1","div"];
218. aa.style = ["a1_0","a1_1","a1_0"];
219. aa.index = 0;
220. aa.nesting = [false,true,"",""]
221. aa.creat();
222. aa =null;
223.
224. // 默认的onclick中，第一个例子
225. var bba = new opCard();
226. bba.bind = ["a2","li","b2","div"];
227. bba.style = ["style1","style2","style3"];
228. bba.overStyle = true;
229. bba.creat();
230. bba = null;
231.
232. // 默认的onclick中，第二个例子
233. var bbb = new opCard();
234. bbb.bind = ["a3","li","b3","div"];
235. bbb.style = ["style1","style2","style3"];
236. bbb.overStyle = true;
237. bbb.creat();
238. bbb = null;
239.
240. // onmousover触发中的例子
241. var cc = new opCard();
242. cc.bind = ["a4","li","b4","div"];
243. cc.style = ["style1","style2","style3"];
244. cc.overStyle = true;
245. cc.overChange = true;
246. cc.creat();
247. cc = null;
248.
249. //自动播放auto第一个例子
250. var dd = new opCard();
251. dd.bind = ["a5","li","b5","div"];
252. dd.style = ["style1","style2","style3"];
253. dd.auto = [true, 3000];
254. dd.creat();
255. dd = null;
256.
257. //自动播放auto第二个例子
258. var ee = new opCard();
259. ee.bind = ["a6","li","b6","div"];
260. ee.style = ["style1","style2","style3"];
261. ee.auto = [true, 2000];
262. ee.overChange = true;
263. ee.creat();
264. ee = null;
265.
266. //自动播放auto第三个例子
267. var ff = new opCard();
268. ff.bind = ["a7","li","b7","div"];
269. ff.style = ["style1","style2","style3"];
270. ff.auto = [true, 1000];
271. ff.overChange = true;
272. ff.overStyle = true;
273. ff.creat();
274. ff = null;
275.
276. //菜单导航例子
277. var gg = new opCard();
278. gg.bind = ["a8","li","b8","div"];
279. gg.style = ["style1","style2","style3"];
280. gg.overStyle = true;
281. gg.menu = true;
282. gg.creat();
283. gg = null;
284.
285. //其他应用
286. var hh = new opCard();
287. hh.bind = ["a9","li","a9","li"];
288. hh.style = ["style4","style4","style4"];
289. //hh.overStyle = true;
290. hh.auto = [true, 1000];
291. hh.creat();
292. hh = null;
293. }
294. </script>
295. <style type="text/css">
296. body{font-size:12px; font-family:Verdana,"宋体";}
297. p,ul{margin:0px; padding:0px;}
298. td,div{font-size:12px}
299. .a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
300. .a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
301. .test{text-decoration:underline;}
302. #b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
303. #b1 div.s strong{color:#0066FF;}
304. /* */
305. .style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
306. .style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
307. .style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
308. #a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
309. #b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
310. #b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
311. #b8 div a{margin-right:20px;}
312. .style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
313. </style>
314. </head>
315. <body>
316. <table width="100%" border="0" cellspacing="0" cellpadding="0">
317. <tr>
318. <td id="a1" width="140" valign="top" align="center">
319. <div class="test">简单介绍</div>
320. <div class="test">默认的onclick</div>
321. <div class="test">onmousover触发</div>
322. <div class="test">自动播放auto</div>
323. <div class="test">菜单导航</div>
324. <div class="test">关于嵌套</div>
325. <div class="test">其他应用</div>
326. <div class="test">一些说明</div>
327. <div class="test"> </div>
328. <div class="test"> </div>
329. <div class="test"> </div>
330. <div class="test"> </div>
331. </td>
332. <td id="b1" valign="top">
333. <div class="s">
334. 封装了一个选项卡，不过已经不像选项卡了-_-!!!<br><br>
335. 现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些<br><br>
336. <p>
337. <strong>obj.bind = ["a1","td","b1","div"];</strong><br>
338. 绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？<br>
339. td标签的数量和div标签的数量必须相同<br>
340. （若不需要显示内容，只显示菜单话，可以这个在td标签上加<td skip="true">）<br>
341. 如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting<br><br>
342.
343. <strong>obj.nesting = [false,true,"",""];</strong><br>
344. 当标签tag有嵌套时，需要用到这个<br>
太多了，弄不下，自己去这里看吧
http://llying.javaeye.com/blog/173245
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
