tab选项卡，不带自动切换定时器

 <!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(){
 //                     清除定时器,只有在500ms后执行
                        if(timer){
                            clearTimeout(timer);
                            timer=null;
                        }
 //                     用that这个变量来引用当前划过的li
                        var that=this;
 //                     延迟半秒执行
                        timer=setTimeout(function(){
                            for (var j=0; j<lis.length;j++) {
                                lis[j].className='';
                                divs[j].style.display='none';
                            }
                            lis[that.id].className='select';
                            divs[that.id].style.display='block';
                        },100);

                    }

                }

         }
     </script>
     <body>
         <div class="notice" id="notice">
             <div id="notice_tit" class="notice_tit">
                 <ul>
                     <li>
                         <a href="#">公告</a>
                     </li>
                     <li>
                         <a href="#">规则</a>
                     </li>
                     <li>
                         <a href="#">论坛</a>
                     </li>
                     <li>
                         <a href="#">安全</a>
                     </li>
                     <li class="select">
                         <a href="#">公益</a>
                     </li>
                 </ul>
             </div>
             <div class="notice_con" id="notice_con">
                 <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>

                             <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: block;">
                     <!--<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 {
     width: 298px;
     height: 98px;
     margin: 10px;
     border: 1px solid #999;
     overflow: hidden;
 }

 .notice_tit {
     height: 27px;
     position: relative;
     background: #f7f7f7;
 }

 .notice_tit ul {
     position: relative;
     width: 301px;
     left: -1px;
 }

 .notice_tit ul li {
     float: left;
     width: 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;width: 134px;
     height: 25px;
     overflow: hidden;
     line-height: 25px;
     white-space: nowrap;
     text-overflow: ellipsis;
     font-size: 14px;
 }