<!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;

 }

tab选项卡，不带自动切换定时器的更多相关文章

  1. tab选项卡，带自动播放

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  2. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

  3. jquery tab选项卡、轮播图、无缝滚动

    最近做一个页写了一个星期,觉得自己对jquery还是很不熟悉 自己查了一下资料写了几个封装好的tab选项卡.轮播图.无缝滚动 $(function(){ //tab选项卡 jQuery.tab=fun ...

  4. html+css+jQuery+JavaScript实现tab自动切换功能

    tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  5. HTML+JS+DOM【选项卡自动切换】

    最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...

  6. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  7. iOS开发-iPad侧边栏Tab选项卡切换

    Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...

  8. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  9. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

随机推荐

  1. 【PAT甲级】1014 Waiting in Line (30 分)（队列维护）

    题面: 输入四个正整数N,M,K,Q(N<=20,M<=10,K,Q<=1000),N为银行窗口数量,M为黄线内最大人数,K为需要服务的人数,Q为查询次数.输入K个正整数,分别代表每 ...

  2. linux 基本命令学习总结

    1. linux的目录结构  (linux核心:一切皆文件) 目录结构解释 (主要的有 /etc  /home  /mnt  /opt  /usr   /tmp) 相对路径和绝对路径的区别 绝对路径  ...

  3. Day1-B-CF-1144B

    简述:有一个n个元素的序列,选奇数下一个就选偶数,偶数则下一个就是奇数,问能否取完,能取完输出0,否则输出能剩下的最小的之和 思路:统计奇偶数个数,若相等或相差一则取完,否则排列后取出最小的前x个(x ...

  4. C 如何判断编译器是否支持C90 C99？

    参考:<C Primer Plus>,Stephen Prata著,姜佑译. ANSI/ISO C标准 美国ANSI成立委员会X3J11,于89/90年,99年,11年,发布C标准:C89 ...

  5. UIWindow的获取

    注意:还是直接用下面这个比较靠谱.尤其是iOS11之后. [UIApplication sharedApplication].keyWindow;   1.下面这种是比较严谨的方式 - (UIWind ...

  6. Lesson 12 banks and their customers

    Why is there no risk to the customer when a bank prints the customer's name on his cheques? When any ...

  7. 如何实现从登录接口响应数据中提取JSESSIONID

    通过调用接口,对服务器产生压力,单接口测试,会遇到响应数据返回的是要求先登录.这是我们在调用这个接口时,根据业务逻辑,必须先登录才可以,比如:提交订单,那么就需要先获取用户登录的JSESSIONID, ...

  8. 不一样的Vue实战3:布局与组件

    不一样的Vue实战3:布局与组件  发表于 2017-06-05 |  分类于 web前端|  |  阅读次数 11534 http://yangyi1024.com/2017/06/05/%E4%B ...

  9. 《C Primer Plus(第6版)(中文版)》普拉达（作者）epub+mobi+azw3

    内容简介 <C Primer Plus(第6版)中文版>详细讲解了C语言的基本概念和编程技巧. <C Primer Plus(第6版)中文版>共17章.第1.2章介绍了C语言编 ...

  10. Linux磁盘

    1.磁盘的接口类型与命名方式 磁盘接口分为SATA.SCSI.SAS.PCI-E.光纤FC通道.常见的设备在Linux中的命名如下: 设备 设备在Linux内的文件名 IDE硬盘 /dev/hd[a- ...