<!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. 820复试算法 快排找第 k 小

    done {20-01-30 12:56} ref: https://blog.csdn.net/fengsigaoju/article/details/50728588 note: void qui ...

  2. Linux下安装Docker，报错docker: unrecognized service的两种解决方案

    转自(方法1):https://www.cnblogs.com/ECJTUACM-873284962/p/9362840.html

  3. Codeforces1307D. Cow and Fields

    对于本题,最短路,考虑bfs,那么我们可以跑2次bfs,求出每个点到1与n的最短路,设为x_a, x_b,那我们可以把问题转换成max(min{x_a+y_b,x_b+y_a}+1)(x,y属于1到n ...

  4. Python 基础之模块之math random time

    一:math 数学模块import math#(1)ceil() 向上取整操作 (对比内置round)res = math.ceil(6.001)  #注意精度损耗print(res)#(2)floo ...

  5. Python - 列表与字符串的相互转换

    1. 列表转换成字符串,用''.join() # 创建一个列表 list1 = ['a','b','c'] # 将列表的元素拼接为字符串 print(''.join(list1)) # 将列表的元素通 ...

  6. 302重定向之后，session中存储的值没了

    302重定向之后,session中存储的值没了

  7. 吴裕雄--天生自然HADOOP操作实验学习笔记：ETL案例

    实验目的 熟悉hadoop生态系统 初步了解大数据点击流分析业务 学会使用hadoop进行数据分析统计 实验原理 hadoop主要有三部分,hdfs做数据存储.mapreduce做数据计算.yarn做 ...

  8. PaperReading20200224

    CanChen ggchen@mail.ustc.edu.cn   BANANAS Motivation: This paper proposes a network performance pred ...

  9. js 用于运行string中的<script>和</script>之间的函数

    /** * Created by 炜文 on 2017/2/15. */ var intext = '485222<script> var i=2;var j=2;console.log( ...

  10. 解题报告：luogu P1516 青蛙的约会

    题目链接:P1516 青蛙的约会 考察拓欧与推式子\(qwq\). 题意翻译? 求满足 \[\begin{cases}md+x\equiv t\pmod{l}\\nd+y\equiv t\pmod{l ...