<!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. c++中的运算符重载operator1(翁恺c++公开课[30]学习笔记)

    运算符重载规则: 只有已经存在的运算符才能被重载,不能自己制造一个c++中没有的运算符进行重载 重载可以在类或枚举类型内进行,也可以是全局函数,但int.float这种已有的类型内是不被允许的 不能二 ...

  2. 标准盒模型、怪异盒模型（box-sizing）

    CSS中Box model是分为两种: W3C标准(标准盒模型) 和 IE标准盒子模型(怪异盒模型).大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准. 重要的一个属性是bo ...

  3. 「POJ1734」Sightseeing trip

    「POJ1734」Sightseeing trip 传送门 这题就是要我们求一个最小环并且按顺序输出一组解. 考虑 \(O(n^3)\) 地用 \(\text{Floyd}\) 求最小环: 考虑 \( ...

  4. JAVA关于回文判断的实现

    (一). 设计思想: 首先输入字符串,然后判断长度若长度为0或1则输出TRUE若长度大于一则进行判断, 若符合条件则输出TRUE反之输出FALSE. (二)程序源代码 import java.util ...

  5. 2_04_MSSQL课程_查询_类型转换、表联合、日期函数、字符串函数

    类型转换 Convert(目标类型,转换的表达式,格式规范) Cast(表达式 as 类型) select Convert(nvarchar(32)),CustomerId))+Title from ...

  6. Django: 页面设计，实现验证码刷新

    之前以为一定要用ajax实现,其实是不用的 改动img的src就行,但两次的src是不能一样的. 所以我是这么实现的: <script> 'use strict'; function re ...

  7. android使用友盟实现第三方登录、分享以及微信回调无反应问题解决办法

    这里介绍微信和新浪登录.微信登录和新浪登录都需要申请第三方账号.可以参考官方文档http://dev.umeng.com/social/android/operation#2还是很清晰的. 新浪微博开 ...

  8. 嵊州普及Day4T4

    题意:求最长上升序列长度和方案数. 思路:经典DP,不需什么别的东西,加一个数组储蓄程序数即可,原题300000可能N2会有问题,但问题不大. 见代码: #include<iostream> ...

  9. [STL]string类型的getline函数

    3.cin.getline() 实际是cin.getline(接收字符串到m,接收个数n,结束字符).接收一个字符串,可以接收空格等,最后一个字符为‘\0’.结束符可以通过设置第三个参数自己设置,默认 ...

  10. MQTT 协议学习：000-有关概念入门

    背景 从本章开始,在没有特殊说明的情况下,文章中的MQTT版本均为 3.1.1. MQTT 协议是物联网中常见的协议之一,"轻量级物联网消息推送协议",MQTT同HTTP属于第七层 ...