This is the TAB (js + css) switching technology that I often use in website design. One is click switching, and the other is touch switching, which is comprehensive. Although there will be a lot of online searches, the tabs below are carefully selected, and the code is concise and easy to understand, and practical, all kinds of browsers can be supported (no such browser is supported so far), and wangzhi blog strongly recommends it!
| The Code is as follows: | Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 002 003 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/* first form */ 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/* second form */ 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/* third form */ 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/* first, second, change the display style */ 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/* method 3: Use a background layer for locating */ 163 var m3 = {0: "", 1: "comment", 2: "technical content", 3: "comment "} 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 172 <body> 173 <br/> 174 <br/> 175 <! -- First form --> 176 <div id = "tabs0"> 177 <ul class = "menu0" id = "menu0"> 178 <li onclick = "setTab ()" class = "hover"> News </li> 179 <li onclick = "setTab ()"> comment </li> 180 <li onclick = "setTab ()"> Technology </li> 181 <li onclick = "setTab ()"> comments </li> 182 </ul> 183 <div class = "main" id = "main0"> 184 <ul class = "block"> <li> News list </li> </ul> 185 <ul> <li> comment list </li> </ul> 186 <ul> <li> Technology list </li> </ul> 187 <ul> <li> comment list </li> </ul> 188 </div> 189 </div> 190 <br/> 191 <br/> 192 <! -- Second form --> 193 <div id = "tabs1"> 194 <div class = "menu1box"> 195 <ul id = "menu1"> 196 <li class = "hover" onmouseover = "setTab ()"> <a href = "#"> News </a> </li> 197 <li onmouseover = "setTab ()"> <a href = "#"> comments </a> </li> 198 <li onmouseover = "setTab ()"> <a href = "#"> Technology </a> </li> 199 <li onmouseover = "setTab ()"> <a href = "#"> comments </a> </li> 200 </ul> 201 </div> 202 <div class = "main1box"> 203 <div class = "main" id = "main1"> 204 <ul class = "block"> <li> News list </li> </ul> 205 <ul> <li> comment list </li> </ul> 206 <ul> <li> Technology list </li> </ul> 207 <ul> <li> comment list </li> </ul> 208 </div> 209 </div> 210 </div> 211 <br/> 212 <br/> 213 <! -- Third form --> 214 <div id = "tabs2"> 215 <div class = "menu2box"> 216 <div id = "tip2"> </div> 217 <ul id = "menu2"> 218 <li class = "hover" onmouseover = "nowtab ()"> <a href = "#"> News </a> </li> 219 <li onmouseover = "nowtab ()"> <a href = "#"> comment </a> </li> 220 <li onmouseover = "nowtab ()"> <a href = "#"> Technology </a> </li> 221 <li onmouseover = "nowtab ()"> <a href = "#"> comments </a> </li> 222 </ul> 223 </div> 224 <div class = "main" id = "main2"> 225 news content 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
