Tab切换类型

　　点击Tab

　　滑过Tab

　　延迟Tab

CSS样式

 *{margin:;

   padding:;

   list-style:none;

   font-size:12px;}

 .notice{width:298px;

         height:98px;

         margin:10px;

         border:1px solid #eee;

         overflow:hidden;}

 .notice-tit{height:27px;

             position:relative;

             background:#F7F7F7;}

 .notice-tit ul{position:absolute;

                width:301px;

                left:-1px;}

 .notice-tit li{float:left;

                width:58px;

                height:26px;

                line-height:26px;

                text-align:center;

                overflow:hidden;

                background:#FFF;

                padding:0 1px;

                background:#F7F7F7;

                border-bottom:1px solid #eee;}

 .notice-tit li.select{background:#FFF;

                       border-bottom-color:#FFF;

                       border-left:1px solid #eee;

                       border-right:1px solid #eee;

                       padding:;

                       font-weight:bolder;}

 .notice li a:link,.notice li a:visited{text-decoration:none;

                                                color:#000;}

 .notice li a:hover{color:#F90;}

 .notice-con .mod{margin:10px 6px;}

 .notice-con .mod ul li{float:left;

                        width:143px;

                        height:25px;

                        overflow:hidden;}

HTML代码

 <!doctype html>

 <html lang="'en">

 <head>

     <meta charset="UTF-8">

     <title>Tab切换-自动</title>

     <link type="text/css" rel="stylesheet" href="css/style.css">

     <script type="text/javascript" src="js/script.js"></script>

 </head>

 <body>

     <div id="notice" class="notice">

         <div id="notice-tit" class="notice-tit">

           <ul>

               <li class="select"><a href="#">公告</a></li>

               <li><a href="#">规则</a></li>

               <li><a href="#">论坛</a></li>

               <li><a href="#">安全</a></li>

               <li><a href="#">公益</a></li>

           </ul>

         </div>

         <div id="notice-con" class="notice-con">

             <div class="mod" style="display:block">

                 <ul>

                     <li><a href="#">张勇：要玩快乐足球</a></li>

                     <li><a href="#">阿里2000万驰援灾区！</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><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>

                         <a href="#">

                           走进无声课堂

                         </a>

                     </li>

                     <li>

                         <a href="#">

                            淘宝之行大众评审赢公益金

                         </a>

                     </li>

                     <li>

                         <a href="#">

                             爱心品牌联合征集

                         </a>

                     </li>

                     <li>

                         <a href="#">

                            名公益机构淘宝开店攻略

                         </a>

                     </li>

                 </ul>

             </div>

         </div>

     </div>

 </body>

 </html>

原生JS代码实现延迟

 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(){

       // 用that这个变量来引用当前滑过的li

       var that=this;

       // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行

       if(timer){

         clearTimeout(timer);

         timer=null;

       }

       // 延迟半秒执行

       timer=window.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';

       },500);

     }

   }

 }

Tab切换类型的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 很好用的Tab标签切换功能，延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  3. WPF案例（－）模拟Windows7 Win+Tab切换

    原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...

  4. tab切换插件开发

    我开发的tab切换插件,基于jquery库,实现tab标签页的切换.插件的名称为jquery.tabSwitch.js. 插件实现代码如下: ; (function ($) { $.fn.tabSwi ...

  5. echarts tab 切换问题整理

    一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...

  6. Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换

    一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...

  7. 简单的Tab切换组件

    由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...

  8. tab切换代码优化

    上次的tab切换的代码里面有很多重复的代码,需要做做优化,把重复的代码用函数封装起来调用. 优化前: <script> //获取id封装成一个函数$()方便调用 function $(id ...

  9. bootstrap中tab切换的使用

    文档地址:https://v3.bootcss.com/javascript/#tabs 简单实例: <!DOCTYPE html> <html lang="en" ...

随机推荐

  1. .NET获取枚举DescriptionAttribute描述信息性能改进的多种方法

    一. DescriptionAttribute的普通使用方式 1.1 使用示例 DescriptionAttribute特性可以用到很多地方,比较常见的就是枚举,通过获取枚举上定义的描述信息在UI上显 ...

  2. nodejs在Liunx上的部署生产方式-PM2

    先安装:npm install -g pm2 (注意:使用它要先安装它,用root账号和全局模式安装一下) 安装完成使用:pm2 -v 查看版本信息 安装成功之后,启动nodejs项目:pm2 sta ...

  3. Linux演示 dd测试IO

    dd测试IO,经常会用到,用来简单测试某个目录的读写性能. 本次测试环境:自己电脑的ubuntu系统-其他Unix/Linux系统也可以用dd. Tips:dd操作需要三思而行,搞清楚确认没问题再进行 ...

  4. 在Elasticsearch中查询Term Vectors词条向量信息

    这篇文章有点深度,可能需要一些Lucene或者全文检索的背景.由于我也很久没有看过Lucene了,有些地方理解的不对还请多多指正. 更多内容还请参考整理的ELK教程 关于Term Vectors 额, ...

  5. 大M法（Big M Method）

    前面一篇讲的单纯形方法的实现,但程序输入的必须是已经有初始基本可行解的单纯形表. 但实际问题中很少有现成的基本可行解,比如以下这个问题: min f(x) = –3x1 +x2 + x3 s.t. x ...

  6. ElasticSearch 配置详解

    配置文件位于es根目录的config目录下面,有elasticsearch.yml和logging.yml两个配置,主配置文件是elasticsearch.yml,日志配置文件是logging.yml ...

  7. UsefulSQL

    FindObject: ---在当前Server上找某某object,注意只需修改"要找的object"就可以使用EXEC sp_MSforeachdb 'use ? ;IF EX ...

  8. 如果根据键盘的frame始终让一个控件始终在键盘的顶部

    我们发现很多时候系统提供的键盘功能有限 有些功能无法实现,所以我们通常的做法就是自定义一个工具条放在键盘的顶部. 那么我们如何知道键盘的frame呢? 这个时候就需要监听键盘发出的通知,在ios中当键 ...

  9. 开源服务专题之-------rsync数据备份

    RSYNC是Remote Sync 远程同步的简称,与SCP的比较,SCP= 无法备份大量数据,类似windows的复制,而rsync=边复制 ,边统计,边比较,可以备份大量数据.可以镜像保存整个目录 ...

  10. C#抽象类

    抽象类使用abstract修饰符声明: 不能创建抽象类的实例: 抽象类只能用作其他类的基类: 抽象类中可以包含抽象成员和普通的非抽象成员: 抽象类自己可以派生自另外一个抽象类: 任何派生自抽象类的[类 ...