javascript通过获取html标签属性class实现多选项卡的方法

这篇文章主要介绍了javascript通过获取html标签属性class实现多选项卡的方法,涉及javascript针对页面元素属性与事件的相关操作技巧,需要的朋友可以参考下

本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta charset="utf-8" /> 
5. <title>原生javascript通过获取html标签属性class实现多选项卡</title> 
6. <style type="text/css"> 
7. .tab { 
8. clear: both; 
9. margin: 20px auto; 
10. padding: 10px; 
11. width: 680px; 
12. overflow: hidden; 
13. } 
14. .tab .tab-menu { 
15. margin: 0; 
16. padding: 0; 
17. list-style: none; 
18. } 
19. .tab .tab-menu li { 
20. display: inline; 
21. margin: 0 2px 0 0; 
22. }  
23. .tab .tab-menu li a { 
24. padding: 0 1em; 
25. text-decoration: none; 
26. color: #a80; 
27. background: #fe5; 
28. } 
29. .tab .tab-menu li a:hover { 
30. background: #fc0; 
31. color: #540; 
32. } 
33. .tab .tab-menu .active { 
34. } 
35. .tab .tab-menu .active a { 
36. padding-bottom: 2px; 
37. font-weight: bold; 
38. color: black; 
39. background: #fc0; 
40. } 
41. .tab .tab-panel { 
42. padding: 1em; 
43. border: 2px solid #fc0; 
44. background: #fff; 
45. } 
46. .tab .tab-panel h2 { 
47. font-size: 1.5em; 
48. color: #fc0; 
49. } 
50. .tab .tab-none { 
51. display: none; 
52. } 
53. </style> 
54. <script type="text/javascript">  
55. function Tab(style, scope){ 
56. this.oItem = this.getByClass(style, scope); 
57. this.init(); 
58. } 
59. Tab.prototype = { 
60. init: function(){ 
61. var that = this, menu, m; 
62. for(var i = 0, len = this.oItem.length; i < len; i++){ 
63. menu = this.oItem[i].getElementsByTagName('li'); 
64. for(var j = 0, mLen = menu.length; j < mLen; j++){ 
65. m = menu[j]; 
66. m.index = j; 
67. m.onmouseover = function(){that.focus(this);} 
68. } 
69. } 
70. }, 
71. focus: function(o){ 
72. var par = o.parentNode.parentNode, panel = par.getElementsByTagName('div'),  
73. btn = par.getElementsByTagName('li'), len = btn.length; 
74. for(var i = 0; i < len; i++){ 
75. btn[i].className = ''; 
76. panel[i].className = this.changeClass(panel[i].className, 'tab-none', true); 
77. } 
78. o.className = 'active'; 
79. panel[o.index].className = this.changeClass(panel[o.index].className, 'tab-none', false); 
80. }, 
81. changeClass: function(cl, cl2, add){ 
82. var flag; 
83. if(cl.match(cl2) != null) flag = true; 
84. if(add ^ flag) return flag ? cl.replace(cl2, '') : cl += ' ' + cl2; 
85. return cl; 
86. }, 
87. getByClass: function(cla, obj){ 
88. var obj = obj || document, arr = []; 
89. if(document.getElementsByClassName){ 
90. return document.getElementsByClassName(cla); 
91. } else { 
92. var all = obj.getElementsByTagName('*'); 
93. for(var i = 0, len = all.length; i < len; i++){ 
94. if(all[i].className.match(cla) != null) arr.push(all[i]); 
95. } 
96. return arr; 
97. } 
98. } 
99. } 
100. window.onload = function(){ 
101. new Tab('tab-menu', null); 
102. } 
103. </script> 
104. </head> 
105. <body> 
106. <div class="tab"> 
107. <ul class="tab-menu"> 
108. <li class="active"><a href="">111</a></li> 
109. <li><a href="">122</a></li> 
110. <li><a href="">133</a></li> 
111. </ul> 
112. <div class="tab-panel"> 
113. 111 
114. </div> 
115. <div class="tab-panel tab-none"> 
116. 122 
117. </div> 
118. <div class="tab-panel tab-none"> 
119. 133 
120. </div> 
121. </div> 
122. <div class="tab"> 
123. <ul class="tab-menu"> 
124. <li class="active"><a href="">211</a></li> 
125. <li><a href="">222</a></li> 
126. <li><a href="">233</a></li> 
127. </ul> 
128. <div class="tab-panel"> 
129. 211 
130. </div> 
131. <div class="tab-panel tab-none"> 
132. 222 
133. </div> 
134. <div class="tab-panel tab-none"> 
135. 233 
136. </div> 
137. </div> 
138. <div class="tab"> 
139. <ul class="tab-menu"> 
140. <li class="active"><a href="">311</a></li> 
141. <li><a href="">322</a></li> 
142. <li><a href="">333</a></li> 
143. </ul> 
144. <div class="tab-panel"> 
145. 311 
146. </div> 
147. <div class="tab-panel tab-none"> 
148. 322 
149. </div> 
150. <div class="tab-panel tab-none"> 
151. 333 
152. </div> 
153. </div> 
154. </body> 
155. </html> 

希望本文所述对大家的javascript程序设计有所帮助。