<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <title>Tab切换</title> <link rel="stylesheet" type="text/css" href="css/tab.css" /> </head> <script type="text/javascript"> function $(id) { return typeof id === 'string' ? document.getElementById(id) : id; }; window.onload = function() { //标签的索引 var index = 0; var timer = null; var lis = $('notice_tit').getElementsByTagName('li'); divs = $('notice_con').getElementsByTagName('div'); if(lis.length != divs.length) return; // 遍历每一个页签并绑定事件 for(var i = 0; i < lis.length; i++) { lis[i].id = i; lis[i].onmouseover = function() { clearInterval(timer); changeoption(this.id); } // 自动播放 lis[i].onmouseout = function() { timer = setInterval(autoplay, 3000); } } if(timer) { clearInterval(timer); timer = null } timer = setInterval(autoplay, 3000); function autoplay() { index++; if(index >= lis.length) { index = 0 } changeoption(index) } function changeoption(curIndex) { for(var j = 0; j < lis.length; j++) { lis[j].className = ''; divs[j].style.display = 'none'; } index = curIndex; lis[curIndex].className = 'select'; divs[curIndex].style.display = 'block'; } } </script> <body> <div class="notice" id="notice"> <div id="notice_tit" class="notice_tit"> <ul> <li class="select"> <a href="#">公告</a> </li> <li> <a href="#">规则</a> </li> <li> <a href="#">论坛</a> </li> <li> <a href="#">安全</a> </li> <li> <a href="#">公益</a> </li> </ul> </div> <div class="notice_con" id="notice_con"> <div class="mod" style="display: block;"> <ul> <li> <a href="#">张勇:快乐足球</a> </li> <li> <a href="#">淘宝之星</a> </li> <li> <a href="#">爱心品牌</a> </li> <li> <a href="#">名公益机构</a> </li> </ul> </div> <div class="mod" style="display: none;"> <ul> <li> <span> [<a href="#">通知</a>] </span> <a href="#">张勇:快乐足球</a> </li> <li> <span> [<a href="#">通知</a>] </span> <a href="#">张勇:快乐足球</a> </li> <li> <span> [<a href="#">通知</a>] </span> <a href="#">张勇:快乐足球</a> </li> <li> <span> [<a href="#">通知</a>] </span> <a href="#">张勇:快乐足球</a> </li> </ul> </div> <div class="mod" style="display: none;"> <ul> <li> <a href="#">张勇:快乐足球</a> </li> <li> <a href="#">张勇:快乐足球</a> </li> <li> <a href="#">张勇:快乐足球</a> </li> <li> <a href="#">张勇:快乐足球</a> </li> </ul> </div> <div class="mod" style="display: none;"> <ul> <li> <span> [<a href="#">通知</a>] </span> <a href="#">规范的股份</a> </li> <li> <span> [<a href="#">通知</a>] </span> <a href="#">发个梵蒂冈讽德诵功</a> </li> <li> <span> [<a href="#">通知</a>] </span> <a href="#">规范化个地方</a> </li> <li> <span> [<a href="#">通知</a>] </span> <a href="#">张勇:快乐足球</a> </li> </ul> </div> <div class="mod" style="display: none;"> <ul> <li> <span> [<a href="#">通知</a>] </span> <a href="#">er</a> </li> <li> <span> [<a href="#">通知</a>] </span> <a href="#">发个梵蒂冈讽德诵功</a> </li> <li> <span> [<a href="#">通知</a>] </span> <a href="#">规范化个地方</a> </li> <li> <span> [<a href="#">通知</a>] </span> <a href="#">张勇:快乐足球</a> </li> </ul> </div> </div> </div> </body> </html>
//css样式
* { margin: 0; padding: 0; list-style: none; font-size: 12px; } .notice { 298px; height: 98px; margin: 10px; border: 1px solid #999; overflow: hidden; } .notice_tit { height: 27px; position: relative; background: #f7f7f7; } .notice_tit ul { position: relative; 301px; left: -1px; } .notice_tit ul li { float: left; 58px; height: 26px; line-height: 26px; text-align: center; overflow: hidden; background: #FFFFFF; border-bottom: 1px solid #CCCCCC; padding: 0 1px; background: #EEEEEE; } .notice ul li a:link,.notice ul li a:visited{ text-align: center; text-decoration: none; color: #666; } .notice ul li a:hover{color: #f90;} .notice_tit ul li.select{ background: #FFFFFF; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #999999; padding: 0; font-weight: bold; } /*切换内容*/ .notice_con .mod{margin: 10px 10px 10px 19px;} .notice_con .mod ul li{ float: left; 134px; height: 25px; overflow: hidden; line-height: 25px; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }