网页制作中分类的选项卡特效代码

1. 选项卡原身是Windows操作系统的一个创意，即通过交换选项，让很多项目信息轮替显示在大小和位置都固定的小块区域里。因此选项卡具有占用篇幅小，辐射内容大的特点。一个典型的例子是你打开IE浏览器，依次点击“工具”-“Internet选项”，这个表单就是一个选项卡典型布局。当然了，这里所说的选项卡效果是要在Web页面实现的，并非应用程序里的菜单选项，在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍一种简洁的选项卡效果的实现，兼容性较好，方便大家直接使用。
   
2. 
   
3. 以下是引用片段：
   
4. <style type="text/css">
   
5. body {
   
6. margin:0px;
   
7. text-align:center;
   
8. font-size:12px;
   
9. }
   
10. #divall {
    
11. margin:auto;
    
12. margin-top:35px;
    
13. width:300px;
    
14. height:200px;
    
15. background-color:#7DA7D9;
    
16. border:0px;
    
17. }
    
18. #title {
    
19. width:300px;
    
20. height:20px;
    
21. font-size:14px;
    
22. margin-top:4px;
    
23. }
    
24. #table1 table {
    
25. width:300px;
    
26. height:30px;
    
27. font-size:12px;
    
28. }
    
29. #table2 table {
    
30. width:300px;
    
31. height:30px;
    
32. font-size:12px;
    
33. }
    
34. #content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 {
    
35. margin:auto;
    
36. height:110px;
    
37. width:290px;
    
38. background-color:#eee;
    
39. position:relative;
    
40. }
    
41. #content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div {
    
42. position:absolute;
    
43. bottom:3px;
    
44. right:3px;
    
45.                 cursor:pointer;
    
46. }
    
47. a {
    
48. text-decoration:none;
    
49. }
    
50. .changebordercolor {
    
51. border-top:1px solid #369;
    
52. border-left:1px solid #369;
    
53. }
    
54. .backbordercolor {
    
55. border:0px solid red;
    
56. }
    
57. </style>
    
58. <script language="javascript">
    
59. function msg(){
    
60. document.getElementById("msg1").style.display="none"
    
61. document.getElementById("msg2").style.display="none"
    
62. }
    
63. function msgnone(ms,cont){
    
64. document.getElementById(ms).style.display='block'
    
65. document.getElementById(cont).style.display='none'
    
66. }
    
67. function aa1(){
    
68. document.getElementById("content1").style.display="block"
    
69. document.getElementById("content2").style.display="none"
    
70. document.getElementById("content3").style.display="none"
    
71. document.getElementById("content4").style.display="none"
    
72. document.getElementById("content5").style.display="none"
    
73. document.getElementById("content6").style.display="none"
    
74. }
    
75. function aa2(){
    
76. document.getElementById("content1").style.display="none"
    
77. document.getElementById("content2").style.display="block"
    
78. document.getElementById("content3").style.display="none"
    
79. document.getElementById("content4").style.display="none"
    
80. document.getElementById("content5").style.display="none"
    
81. document.getElementById("content6").style.display="none"
    
82. }
    
83. function aa3(){
    
84. document.getElementById("content1").style.display="none"
    
85. document.getElementById("content2").style.display="none"
    
86. document.getElementById("content3").style.display="block"
    
87. document.getElementById("content4").style.display="none"
    
88. document.getElementById("content5").style.display="none"
    
89. document.getElementById("content6").style.display="none"
    
90. }
    
91. function aa4(){
    
92. document.getElementById("content1").style.display="none"
    
93. document.getElementById("content2").style.display="none"
    
94. document.getElementById("content3").style.display="none"
    
95. document.getElementById("content4").style.display="block"
    
96. document.getElementById("content5").style.display="none"
    
97. document.getElementById("content6").style.display="none"
    
98. }
    
99. function aa5(){
    
100. document.getElementById("content1").style.display="none"
     
101. document.getElementById("content2").style.display="none"
     
102. document.getElementById("content3").style.display="none"
     
103. document.getElementById("content4").style.display="none"
     
104. document.getElementById("content5").style.display="block"
     
105. document.getElementById("content6").style.display="none"
     
106. }
     
107. function aa6(){
     
108. document.getElementById("content1").style.display="none"
     
109. document.getElementById("content2").style.display="none"
     
110. document.getElementById("content3").style.display="none"
     
111. document.getElementById("content4").style.display="none"
     
112. document.getElementById("content5").style.display="none"
     
113. document.getElementById("content6").style.display="block"
     
114. }
     
115. </script>
     
116. <body onLoad="aa1();msg()">
     
117. <div id="divall">
     
118. <div id="title">分类类型</div>
     
119. <div id="table1">
     
120. <table cellpadding=0 cellspacing=0 boder=0>
     
121. <tr align=center>
     
122. <td onMouseOver="this.bgColor='#33ccff';aa1();msg();this.className='changebordercolor'"
     
123. onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
     
124. href="http://www.68design.net">游戏下载</a></td>
     
125. 
     
126. <td onMouseOver="this.bgColor='#33ccff';aa2();msg();this.className='changebordercolor'"
     
127. onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
     
128. href="http://www.68design.net">游戏下载</a></td>
     
129. 
     
130. <td onMouseOver="this.bgColor='#33ccff';aa3();msg();this.className='changebordercolor'"
     
131. onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
     
132. href="http://www.68design.net">游戏下载</a></td>
     
133. 
     
134. </tr></table></div>
     
135. <div id="content1">第一个里面的内容<div onClick="msgnone('msg1','content1')">关闭</div></div>
     
136. <div id="content2">第二个里面的内容<div onClick="msgnone('msg1','content2')">关闭</div></div>
     
137. <div id="content3">第三个里面的内容<div onClick="msgnone('msg1','content3')">关闭</div></div>
     
138. <div id="msg1">没有选择类型</div>
     
139. <div id="table2">
     
140. <table cellpadding=0 cellspacing=0 boder=0>
     
141. <tr align=center>
     
142. <td onMouseOver="this.bgColor='#33ccff';aa4();msg();this.className='changebordercolor'"
     
143. onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
     
144. href="http://www.68design.net">游戏下载</a></td>
     
145. 
     
146. <td onMouseOver="this.bgColor='#33ccff';aa5();msg();this.className='changebordercolor'"
     
147. onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
     
148. href="http://www.68design.net">游戏下载</a></td>
     
149. 
     
150. <td onMouseOver="this.bgColor='#33ccff';aa6();msg();this.className='changebordercolor'"
     
151. onMouseOut="this.bgColor='#7DA7D9';this.className='backbordercolor'"><a
     
152. href="http://www.68design.net">游戏下载</a></td>
     
153. 
     
154. </tr></table></div>
     
155. <div id="content4">第四个里面的内容<div onClick="msgnone('msg3','content4')">关闭</div></div>
     
156. <div id="content5">第五个里面的内容<div onClick="msgnone('msg2','content5')">关闭</div></div>
     
157. <div id="content6">第六个里面的内容<div onClick="msgnone('msg2','content6')">关闭</div></div>
     
158. <div id="msg2">没有选择类型</div>
     
159. </div></body>

复制代码