-
常用软件
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-05-31
来源 ：
阅读 1692
评论 0
摘要：本文讲解了Dreamweaver选项卡的实现方法，希望阅读本篇文章以后大家有所收获，帮助大家对Dreamweaver的掌握更加深入。
选项卡实现代码：
[html] view plain copy
1. <!DOCTYPE html>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html xmlns="//www.w3.org/1999/xhtml">
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6. <title>无标题文档</title>
7. <style>
8. #biaodan {
9. height: 600px;
10. width: 365px;
11. padding-top: 100px;
12. margin-top: 0px;
13. margin-right: auto;
14. margin-bottom: 0px;
15. margin-left: auto;
16. font: "微软雅黑" 14px/30px;
17. }
18. body {
19. margin: 0px;
20. padding: 0px;
21. }
22. #shang{
23. height: 30;
24. text-align: center;
25. border-Top: 3px solid #060;
26. line-height: 30px;
27. vertical-align: middle;
28. }
29. #xia {
30. height: 500px;
31. }
32. #junshi ul ,#zhengzhi ul,#wenhua ul{
33. list-style-type: none;
34. }
35. a:link,a:visited,a:hover{
36. text-decoration:none;
37. }
38. #zhengzhi,#wenhua{
39. display:none;
40. }
41. #biaodan #sp-junshi{
42. width: 120px;
43. height: 29px;
44. border-left: 1px solid #666;
45. border-right: 1px solid #666;
46. float: left;
47. border-bottom: none;
48. background-color:none;
49. }
50. #biaodan #sp-zhengzhi{
51. width: 120px;
52. height: 29px;
53. border-right: 1px solid #666;
54. border-bottom: 1px solid #666;
55. background-color: #cfcfcf;
56. float: left;
57. }
58. #biaodan #sp-wenhua{
59. width: 120px;
60. height: 29px;
61. border-right: 1px solid #666;
62. border-bottom: 1px solid #666;
63. background-color: #cfcfcf;
64. float: left;
65. }
66. body {
67. margin: 0px;
68. padding: 0px;
69. }
70. </style>
71. <script>
72. function xianshijunshi(){
73. //军事显示
74. document.getElementById("junshi").style.display = "block";
75. //政治隐藏
76. document.getElementById("zhengzhi").style.display = "none";
77. //文化隐藏
78. document.getElementById("wenhua").style.display = "none";
79. document.getElementById("sp-junshi").style.background = "none"
80. document.getElementById("sp-zhengzhi").style.background ="#cfcfcf";
81. document.getElementById("sp-wenhua").style.background ="#cfcfcf";
82. document.getElementById("sp-junshi").style.borderBottom = "none";
83. document.getElementById("sp-zhengzhi").style.borderBottom = "1px solid #666";
84. document.getElementById("sp-wenhua").style.borderBottom = "1px solid #666";
85. }
86. function xianshizhengzhi(){
87. //军事隐藏
88. document.getElementById("junshi").style.display = "none";
89. //政治显示
90. document.getElementById("zhengzhi").style.display = "block";
91. //文化隐藏
92. document.getElementById("wenhua").style.display = "none";
93. document.getElementById("sp-junshi").style.background = "#cfcfcf"
94. document.getElementById("sp-zhengzhi").style.background ="none";
95. document.getElementById("sp-wenhua").style.background ="#cfcfcf";
96. document.getElementById("sp-junshi").style.borderBottom = "1px solid #666";
97. document.getElementById("sp-zhengzhi").style.borderBottom = "none";
98. document.getElementById("sp-wenhua").style.borderBottom = "1px solid #666";
99. }
100. function xianshiwenhua(){
101. //军事隐藏
102. document.getElementById("junshi").style.display = "none";
103. //政治隐藏
104. document.getElementById("zhengzhi").style.display = "none";
105. //文化显示
106. document.getElementById("wenhua").style.display = "block";
107. document.getElementById("sp-junshi").style.background = "#cfcfcf"
108. document.getElementById("sp-zhengzhi").style.background ="#cfcfcf";
109. document.getElementById("sp-wenhua").style.background ="none"
110. document.getElementById("sp-junshi").style.borderBottom = "1px solid #666";
111. document.getElementById("sp-zhengzhi").style.borderBottom = "1px solid #666";
112. document.getElementById("sp-wenhua").style.borderBottom = "none";
113. }
114. </script>
115. </head>
116. <body>
117. <div id="biaodan">
118. <div id="shang" >
119. <div id="sp-junshi" class="s1" onMouseover="xianshijunshi()">军事</div>
120. <div id="sp-zhengzhi" class="s2" onMouseover="xianshizhengzhi()">政治</div>
121. <div id="sp-wenhua" class="s3" onMouseover="xianshiwenhua()">文化</div>
122. <div style="clear:both;"></div>
123. </div>
124. <div id="xia">
125. <div id="junshi" class ="info">
126. <ul>
127. <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
128. <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
129. <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
130. <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
131. <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
132. <li><a href="#">军事军事军事军事军事军事军事军事</a></li>
133. </ul>
134. </div>
135. <div id="zhengzhi" class ="info">
136. <ul>
137. <li><a href="#">政治政治政治政治政治政治政治政治</a></li>
138. <li><a href="#">政治政治政治政治政治政治政治政治</a></li>
139. <li><a href="#">政治政治政治政治政治政治政治政治</a></li>
140. <li><a href="#">政治政治政治政治政治政治政治政治</a></li>
141. <li><a href="#">政治政治政治政治政治政治政治政治</a></li>
142. <li><a href="#">政治政治政治政治政治政治政治政治</a></li>
143. </ul>
144. </div>
145. <div id="wenhua" class ="info">
146. <ul>
147. <li><a href="#">文化文化文化文化文化文化文化文化</a></li>
148. <li><a href="#">文化文化文化文化文化文化文化文化</a></li>
149. <li><a href="#">文化文化文化文化文化文化文化文化</a></li>
150. <li><a href="#">文化文化文化文化文化文化文化文化</a></li>
151. <li><a href="#">文化文化文化文化文化文化文化文化</a></li>
152. <li><a href="#">文化文化文化文化文化文化文化文化</a></li>
153. </ul>
154. </div>
155. </div>
156. </div>
157. </body>
158. </html>
选项卡实现页面
本文由职坐标整理发布，更多相关内容，请关注职坐标常用软件Dreamweaver频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
