| 代码如下 |
复制代码 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
002 <html xmlns="http://www.w3.org/1999/xhtml">
003 <head>
004 <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
005 <title>tabMenu</title>
006 <style type="text/css">
007 <!--
008 body,div,ul,li{
009 margin:0 auto;
010 padding:0;
011 }
012 body{
013 font:12px "宋体";
014 text-align:center;
015 }
016 a:link{
017 color:#000033;
018 text-decoration:none;
019 }
020 a:visited {
021 color:#000033;
022 text-decoration:none;
023 }
024 a:hover {
025 color: #c00;
026 text-decoration:underline;
027 }
028 ul{
029 list-style:none;
030 }
031 .main{
032 clear:both;
033 padding:8px;
034 text-align:center;
035 }
036 /*第一种形式*/
037 #tabs0 {
038 height: 428px;
039 width: 601px;
040 border: 1px solid #cbcbcb;
041 background-color: #f2f6fb;
042 }
043 .menu0{
044 width: 400px;
045 }
046 .menu0 li{
047 display:block;
048 float: left;
049 padding: 4px 0;
050 width:100px;
051 text-align: center;
052 cursor:pointer;
053 background: #FFFFff;
054 }
055 .menu0 li.hover{
056 background: #f2f6fb;
057 }
058 #main0 ul{
059 display: none;
060 }
061 #main0 ul.block{
062 display: block;
063 }
064 /*第二种形式*/
065 #tabs1{
066 text-align:left;
067 width:400px;
068 }
069 .menu1box{
070 position:relative;
071 overflow:hidden;
072 height:22px;
073 width:400px;
074 text-align:left;
075 }
076 #menu1{
077 position:absolute;
078 top:0;
079 left:0;
080 z-index:1;
081 }
082 #menu1 li{
083 float:left;
084 display:block;
085 cursor:pointer;
086 width:72px;
087 text-align:center;
088 line-height:21px;
089 height:21px;
090 }
091 #menu1 li.hover{
092 background:#fff;
093 border-left:1px solid #1068E3;
094 border-top:1px solid #1068E3;
095 border-right:1px solid #1068E3;
096 }
097 .main1box{
098 clear:both;
099 margin-top:-1px;
100 border:1px solid #1068E3;
101 height:186px;
102 width:390px;
103 }
104 #main1 ul{
105 display: none;
106 }
107 #main1 ul.block{
108 display: block;
109 }
110 /*第三种形式*/
111 .menu2box{
112 position:relative;
113 overflow:hidden;
114 height:22px;
115 width:400px;
116 text-align:left;
117 background: #FFFFff;
118 }
119 #tabs2 {
120 height: 200px;
121 width: 400px;
122 border: 1px solid #cbcbcb;
123 background-color: #f2f6fb;
124 }
125 #tip2{
126 position:absolute;
127 top:0;
128 left:0;
129 height:22px;
130 line-height:22px;
131 z-index:0;
132 width:100px;
133 background: #f2f6fb;
134 }
135 #menu2{
136 position:absolute;
137 top:0;
138 left:0;
139 z-index:1;
140 }
141 #menu2 li{
142 display:block;
143 float: left;
144 padding: 4px 0;
145 width:100px;
146 text-align: center;
147 cursor:pointer;
148 }
149 -->
150 </style>
151 <script>
152 <!--
153 /*第一种形式 第二种形式 更换显示样式*/
154 function setTab(m,n){
155 var tli=document.getElementById("menu"+m).getElementsByTagName("li");
156 var mli=document.getElementById("main"+m).getElementsByTagName("ul");
157 for(i=0;i<tli.length;i++){
158 tli[i].className=i==n?"hover":"";
159 mli[i].style.display=i==n?"block":"none";
160 }
161 }
162 /*第三种形式 利用一个背景层定位*/
163 var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
164 function nowtab(m,n){
165 if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
166 document.getElementById("tip"+m).style.left=n*100+'px';
167 document.getElementById("main2").innerHTML=m3[n];
168 }
169 //-->
170 </script>
171 </head>
172 <body>
173 <br />
174 <br />
175 <!--第一种形式-->
176 <div id="tabs0">
177 <ul class="menu0" id="menu0">
178 <li onclick="setTab(0,0)" class="hover">新闻</li>
179 <li onclick="setTab(0,1)">评论</li>
180 <li onclick="setTab(0,2)">技术</li>
181 <li onclick="setTab(0,3)">点评</li>
182 </ul>
183 <div class="main" id="main0">
184 <ul class="block"><li>新闻列表</li></ul>
185 <ul><li>评论列表</li></ul>
186 <ul><li>技术列表</li></ul>
187 <ul><li>点评列表</li></ul>
188 </div>
189 </div>
190 <br />
191 <br />
192 <!--第二种形式-->
193 <div id="tabs1">
194 <div class="menu1box">
195 <ul id="menu1">
196 <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
197 <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
198 <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
199 <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
200 </ul>
201 </div>
202 <div class="main1box">
203 <div class="main" id="main1">
204 <ul class="block"><li>新闻列表</li></ul>
205 <ul><li>评论列表</li></ul>
206 <ul><li>技术列表</li></ul>
207 <ul><li>点评列表</li></ul>
208 </div>
209 </div>
210 </div>
211 <br />
212 <br />
213 <!--第三种形式-->
214 <div id="tabs2">
215 <div class="menu2box">
216 <div id="tip2"></div>
217 <ul id="menu2">
218 <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
219 <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
220 <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
221 <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
222 </ul>
223 </div>
224 <div class="main" id="main2">
225 新闻内容
226 </div>
227 </div>
228 </body>
</html> |
|
