| 代碼如下 | 複製代碼 |
<!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> |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
