js简单实现竖向tab选项卡的方法

这篇文章主要介绍了js简单实现竖向tab选项卡的方法,涉及javascript实现tab切换效果的相关技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了js简单实现竖向tab选项卡的方法。分享给大家供大家参考。具体如下：

选项卡占据左边，而内容放在右边，一个适合新手的竖向的tab选项卡特效例子

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2. "http://www.w3.org/TR/html4/strict.dtd"> 
3. <html lang="ru"> 
4. <head> 
5. <title>简单js实现tab切换</title> 
6. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
7. <style type="text/css"> 
8. *{ 
9. margin:0;padding:0; 
10. -webkit-box-sizing: border-box; 
11. -moz-box-sizing: border-box; 
12. box-sizing: border-box; 
13. } 
14. .container{ 
15. margin:0 auto; 
16. width:500px; 
17. overflow:hidden; 
18. background:beige; 
19. } 
20. li{ 
21. border-top:1px solid lightgrey; 
22. border-left:1px solid lightgrey; 
23. border-right:1px solid lightgrey; 
24. height:35px; 
25. line-height:35px; 
26. list-style:none; 
27. text-align:center; 
28. width:100px; 
29. } 
30. li:last-child{ 
31. height:159px;border-right:1px solid lightgrey; 
32. border-bottom:1px solid lightgrey; 
33. } 
34. li.active { 
35. border-right:1px solid white;background:white; 
36. } 
37. li.normal { 
38. border-right:1px solid white;background:red; 
39. } 
40. #tab_content{ 
41. float:right; 
42. width:400px; 
43. *width:394px; 
44. background:white; 
45. height:300px; 
46. overflow:hidden; 
47. border-top:1px solid lightgrey; 
48. border-right:1px solid lightgrey; 
49. border-bottom:1px solid lightgrey; 
50. border-left:0px solid lightgrey; 
51. } 
52. #tab_content .content{ 
53. padding: 15px; 
54. -moz-border-radius: 5px; 
55. height:300px; 
56. } 
57. </style> 
58. </head> 
59. <body> 
60. <div class='container' > 
61. <div id="tab_content"> 
62. <div id="a" class="content"> 
63. aaaaa 
64. </div> 
65. <div id="b" class="content"> 
66. bbbbb 
67. </div> 
68. <div id="c" class="content"> 
69. cccccc 
70. </div> 
71. <div id="d" class="content"> 
72. DDDDDDDDDDDDDDd 
73. </div> 
74. </div>  
75. <div > 
76. <ul id='tabnav'><li ><a href="#a" >A</a></li> 
77. <li class='active'><a href="#b" >B</a></li> 
78. <li><a href="#c" >C</a></li> 
79. <li><a href="#d" >D</a></li> 
80. <li ><a href="#d" ></a></li> 
81. </ul> 
82. </div> 
83. </div>  
84. <script type="text/javascript"> 
85. function changeStyle(){ 
86. this.onclick=function(){ 
87. var list=this.parentNode.childNodes; 
88. for(var i=0;i<list.length;i++){ 
89. if(1==list[i].nodeType && 'active'==list[i].className){ 
90. list[i].className=""; 
91. } 
92. } 
93. this.className='active'; 
94. } 
95. } 
96. var tabs=document.getElementById('tabnav').childNodes; 
97. for(var i=0;i<tabs.length;i++){ 
98. if(1==tabs[i].nodeType){ 
99. changeStyle.call(tabs[i]); 
100. } 
101. } 
102. </script> 
103. </body> 
104. </html> 

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