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. 浅谈attr()和prop()

    刚开始学JQ的时候 ,看到attr()和prop()这两个属性的时候感觉很迷茫,而且配合官方给出的推荐使用图: prop()可以做到的attr()完全都可以,而且做不到的attr()也可以做到.何用? ...

  2. UML基础系列：用例图

    1. 概述 用例图(Use Case Diagram)描述“用户.需求.系统功能单元”之间的关系,是参与者所能观察和使用到的系统功能模型图. 用例图用于需求分析阶段 用例图包含6个基本元素:参与者(A ...

  3. javascript学习目录

    类型系统 [1]基本数据类型 [2]引用类型中的对象Object [3]引用类型中的数组Array [4]引用类型中的时间Date [5]函数Function [6]正则表达式RegExp [7]包装 ...

  4. java坦克大战源码下载

    HJZGG:https://github.com/hjzgg/hjzgg_tank_java 解压之后运行可执行jar包即可!效果图如下: v 1.游戏开始 v 2.选择地图 v 3.开始游戏 v 4 ...

  5. mysql数据库移植

    在mysql数据库移植的时候,把自己电脑上mysql中data目录的一些重要文件复制到其他电脑上,先备份一下其他电脑上的mysql的data目录,然后替换! 例如我的mysql默认的数据库文件位置:  ...

  6. java中多线程模拟（多生产，多消费，Lock实现同步锁，替代synchronized同步代码块）

    import java.util.concurrent.locks.*; class DuckMsg{ int size;//烤鸭的大小 String id;//烤鸭的厂家和标号 DuckMsg(){ ...

  7. 如何对SharePoint网站进行预热(warmup)以提高响应速度

    问题描述 SharePoint Server是一个易于使用的协作平台,目前在越来越多的企业中被应用开来.SharePoint Server是通过网站的形式向最终用户提供服务的,而这个网站是基于ASP. ...

  8. 图像映射map

    <map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...

  9. 理解 angular2 基础概念和结构 ----angular2系列（二)

    前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...

  10. Elasticsearch——Rest API中的常用用法

    本篇翻译的是Elasticsearch官方文档中的一些技巧,是使用Elasticsearch必不可少的必备知识,并且适用于所有的Rest Api. 返回数据格式化 当在Rest请求后面添加?prett ...