1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html" charset="UTF-8"> 5 <title>Tab切换</title> 6 <link rel="stylesheet" type="text/css" href="css/tab.css"/> 7 </head> 8 <script type="text/javascript"> 9 function $(id){ 10 return typeof id===‘string‘?document.getElementById(id):id; 11 }; 12 window.onload=function(){ 13 //标签的索引 14 var index=0; 15 var timer=null; 16 17 var lis=$(‘notice_tit‘).getElementsByTagName(‘li‘); 18 divs=$(‘notice_con‘).getElementsByTagName(‘div‘); 19 if(lis.length!=divs.length) 20 return; 21 // 遍历所有的页签 22 for(var i=0; i<lis.length; i++){ 23 lis[i].id=i; 24 lis[i].onmouseover=function(){ 25 // 清除定时器,只有在500ms后执行 26 if(timer){ 27 clearTimeout(timer); 28 timer=null; 29 } 30 // 用that这个变量来引用当前划过的li 31 var that=this; 32 // 延迟半秒执行 33 timer=setTimeout(function(){ 34 for (var j=0; j<lis.length;j++) { 35 lis[j].className=‘‘; 36 divs[j].style.display=‘none‘; 37 } 38 lis[that.id].className=‘select‘; 39 divs[that.id].style.display=‘block‘; 40 },100); 41 42 } 43 44 45 } 46 47 48 49 50 51 52 53 54 } 55 </script> 56 <body> 57 <div class="notice" id="notice"> 58 <div id="notice_tit" class="notice_tit"> 59 <ul> 60 <li> 61 <a href="#">公告</a> 62 </li> 63 <li> 64 <a href="#">规则</a> 65 </li> 66 <li> 67 <a href="#">论坛</a> 68 </li> 69 <li> 70 <a href="#">安全</a> 71 </li> 72 <li class="select"> 73 <a href="#">公益</a> 74 </li> 75 </ul> 76 </div> 77 <div class="notice_con" id="notice_con"> 78 <div class="mod" style="display: none;"> 79 <ul> 80 <li> 81 <a href="#">张勇：快乐足球</a> 82 </li> 83 <li> 84 <a href="#">淘宝之星</a> 85 </li> 86 <li> 87 <a href="#">爱心品牌</a> 88 </li> 89 <li> 90 <a href="#">名公益机构</a> 91 </li> 92 93 </ul> 94 </div> 95 <div class="mod" style="display: none;"> 96 <ul> 97 <li> 98 <span> 99 [<a href="#">通知</a>] 100 </span> 101 <a href="#">张勇：快乐足球</a> 102 </li> 103 <li> 104 <span> 105 [<a href="#">通知</a>] 106 </span> 107 <a href="#">张勇：快乐足球</a> 108 </li> 109 <li> 110 <span> 111 [<a href="#">通知</a>] 112 </span> 113 <a href="#">张勇：快乐足球</a> 114 </li> 115 <li> 116 <span> 117 [<a href="#">通知</a>] 118 </span> 119 <a href="#">张勇：快乐足球</a> 120 </li> 121 </ul> 122 </div> 123 <div class="mod" style="display: none;"> 124 <ul> 125 <li> 126 127 <a href="#">张勇：快乐足球</a> 128 </li> 129 <li> 130 131 <a href="#">张勇：快乐足球</a> 132 </li> 133 <li> 134 135 <a href="#">张勇：快乐足球</a> 136 </li> 137 <li> 138 139 <a href="#">张勇：快乐足球</a> 140 </li> 141 </ul> 142 </div> 143 <div class="mod" style="display: none;"> 144 <ul> 145 <li> 146 <span> 147 [<a href="#">通知</a>] 148 </span> 149 <a href="#">规范的股份</a> 150 </li> 151 <li> 152 <span> 153 [<a href="#">通知</a>] 154 </span> 155 <a href="#">发个梵蒂冈讽德诵功</a> 156 </li> 157 <li> 158 <span> 159 [<a href="#">通知</a>] 160 </span> 161 <a href="#">规范化个地方</a> 162 </li> 163 <li> 164 <span> 165 [<a href="#">通知</a>] 166 </span> 167 <a href="#">张勇：快乐足球</a> 168 </li> 169 </ul> 170 </div> 171 <div class="mod" style="display: block;"> 172 <!--<ul> 173 <li> 174 <span> 175 [<a href="#">通知</a>] 176 </span> 177 <a href="#">er</a> 178 </li> 179 <li> 180 <span> 181 [<a href="#">通知</a>] 182 </span> 183 <a href="#">发个梵蒂冈讽德诵功</a> 184 </li> 185 <li> 186 <span> 187 [<a href="#">通知</a>] 188 </span> 189 <a href="#">规范化个地方</a> 190 </li> 191 <li> 192 <span> 193 [<a href="#">通知</a>] 194 </span> 195 <a href="#">张勇：快乐足球</a> 196 </li> 197 </ul>--> 198 </div> 199 200 </div> 201 </div> 202 </body> 203 </html> 204 //css样式 205 * { 206 margin: 0; 207 padding: 0; 208 list-style: none; 209 font-size: 12px; 210 } 211 212 .notice { 213 width: 298px; 214 height: 98px; 215 margin: 10px; 216 border: 1px solid #999; 217 overflow: hidden; 218 } 219 220 .notice_tit { 221 height: 27px; 222 position: relative; 223 background: #f7f7f7; 224 } 225 226 .notice_tit ul { 227 position: relative; 228 width: 301px; 229 left: -1px; 230 } 231 232 .notice_tit ul li { 233 float: left; 234 width: 58px; 235 height: 26px; 236 line-height: 26px; 237 text-align: center; 238 overflow: hidden; 239 background: #FFFFFF; 240 border-bottom: 1px solid #CCCCCC; 241 padding: 0 1px; 242 background: #EEEEEE; 243 } 244 .notice ul li a:link,.notice ul li a:visited{ 245 text-align: center; 246 text-decoration: none; 247 color: #666; 248 } 249 250 .notice ul li a:hover{color: #f90;} 251 .notice_tit ul li.select{ 252 background: #FFFFFF; 253 border-bottom: 1px solid #FFFFFF; 254 border-left: 1px solid #999999; 255 padding: 0; 256 font-weight: bold; 257 } 258 259 /*切换内容*/ 260 .notice_con .mod{margin: 10px 10px 10px 19px;} 261 .notice_con .mod ul li{ 262 float: left;width: 134px; 263 height: 25px; 264 overflow: hidden; 265 line-height: 25px; 266 white-space: nowrap; 267 text-overflow: ellipsis; 268 font-size: 14px; 269 }
原文：https://www.cnblogs.com/qianxundaozhu/p/10931173.html