<!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. String_Java

    1.substring() 方法返回字符串的子字符串. 语法 public String substring(int beginIndex)//返回第beginIndex个字符以后的子字符串 或 pu ...

  2. Java垃圾回收与内存

    好久没看关于java的书了, 最近, 看了James Gosling的<<Java程序设计语言>>, 做了一些读书笔记. 这部分是关于垃圾回收的. 1.垃圾回收 对象是使用ne ...

  3. java问题 2019

    一.Java基础和高级 1.String类为什么是final的. 2.HashMap的源码,实现原理,底层结构. 3.反射中,Class.forName和classloader的区别 4.sessio ...

  4. mysql-e选项

    -e Execute command and quit 通过-e选项,可以在命令行中操作mysql 一些mysql设置的有密码,此时可以在my.ini(my.cnf)的[client]下面给出数据库的 ...

  5. Jdk的删除和配置

    电脑里很久以前装的jdk7.0,现在升级到jdk8,为了避免冲突先彻底删除再重新安装新的jdk. 卸载: 设置——应用——搜索java(会显示两个)——左键点击——卸载 安装: jdk-8u212-w ...

  6. SQL数据库入门基础

      SQL(Structure Query Language,结构化查询语言)语言是国际标准化组织(ISO)采纳的标准数据库语言. 数据库就是一幢大楼,我们要先盖楼,然后再招住户(住户当然就是数据库对 ...

  7. UISearchBar设置背景色

    1.关于UISearchBar的背景颜色,竟然要如下设置才正常: [documentSearchView setBackgroundImage:[UIImage new]]; documentSear ...

  8. 用Total Commander替换windos默认资源管理器的方法

    Total Commander(简称TC)是一个功能强大的资源管理器. TC本身没有自带的替换windows资源管理器的功能,就必须自己动手解决了. 第一步先Google一下看有没有答案.当时搜出了不 ...

  9. vue dialog每次打开会展示上一次数据（转载）

    原文地址: (https://www.jianshu.com/p/82b6681d0768) 在dialog外套一层div,div中以v-if来控制组件el-dialog的出现与否,每次弹出el-di ...

  10. Angular4之时间管道

    {{时间戳 |date:“yyyy/MM/dd HH:mm:ss”}} “YYYY/MM/DD”不可