zoukankan      html  css  js  c++  java
  • tab选项卡,不带自动切换定时器

      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      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      301px;
    229     left: -1px;
    230 }
    231 
    232 .notice_tit ul li {
    233     float: left;
    234      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; 134px;
    263     height: 25px;
    264     overflow: hidden;
    265     line-height: 25px;
    266     white-space: nowrap;
    267     text-overflow: ellipsis;
    268     font-size: 14px;
    269 }
  • 相关阅读:
    MS CRM 2011 RC中的新特性(4)——活动方面之批量编辑、自定义活动
    最近的一些有关MS CRM 2011的更新
    MS CRM 2011 RC中的新特性(6)——连接
    MS CRM 2011 RC中的新特性(7)—仪表板
    参加MS CRM2011深度培训课程——第一天
    MS CRM 2011插件调试工具
    MS CRM2011实体介绍(四)——目标管理方面的实体
    MS CRM 2011 RC中的新特性(3)——客户服务管理方面
    MS CRM 2011 RC中的新特性(8)—数据管理
    ExtAspNet 登陆
  • 原文地址:https://www.cnblogs.com/qianxundaozhu/p/10931173.html
Copyright © 2011-2022 走看看