<!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. 敏感、脆弱,OLED柔性屏会带给制造业怎样的灾难？

    智能手机市场已经有些意兴阑珊,大家创新的点子在过去十年逐一亮剑,也带来了一些革命,现在谈到智能手机硬件,只能是更大的屏幕.更大的电池,更高的摄像头像素等等,长期的创新乏力,已经让消费者失去" ...

  2. Controller层注解

    /** * Copyright © 2012-2014 <a href="https://github.com/thinkgem/jeesite">JeeSite< ...

  3. JS 一次性事件问题

    项目的需求就是不能重复提交 是通过click点击事件提交数据,到这里的时候想了很多办法,比如说销毁这个点击事件, 但是这个实现起来是相对比较麻烦的,后面想到了一个相对比较简单的办法 通过推荐判断 JS ...

  4. SpringBoot之基础入门-专题一

    SpringBoot之基础入门-专题一 一.Spring介绍 1.1.SpringBoot简介 在初次学习Spring整合各个第三方框架构建项目的时候,往往会有一大堆的XML文件的配置,众多的dtd或 ...

  5. in comment after two dashes (--) next character must be > not - (position: START_TAG seen ...

    Error executing Maven. in comment after two dashes (--) next character must be > not - (position: ...

  6. matlab练习程序（龙格库塔法）

    非刚性常微分方程的数值解法通常会用四阶龙格库塔算法,其matlab函数对应ode45. 对于dy/dx = f(x,y),y(0)=y0. 其四阶龙格库塔公式如下: 对于通常计算,四阶已经够用,四阶以 ...

  7. Py西游攻关之基础数据类型(六)-文件操作

    Py西游攻关之基础数据类型 - Yuan先生 https://www.cnblogs.com/yuanchenqi/articles/5782764.html 九 文件操作 9.1 对文件操作流程 打 ...

  8. js加密（九）hr.bibibi md5

    1. 寻找加密js: 2. 结果: 3. execjs调用js即可.

  9. LNMP一键安装包 PHP自动升级脚本

    LNMP一键安装包 PHP自动升级脚本 2011年03月15日 上午 | 作者:VPS侦探 前一段时间完成了lnmp一键安装包的PHP自动升级脚本,今天发布出来,如果想升级PHP版本的lnmp用户可以 ...

  10. 网站seo优化教你如何引蜘蛛爬行网站

    1. 网站和页面的权重 这个是咱们都知道的,网站和页面的权重越高的话,蜘蛛一般会匍匐的越深,被蜘蛛录入的页面也更多一些.可是一个新的网站,权重到达1的话是相对简单的,可是假如想要把权重再网上添加则会越 ...