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. 快速入门系列--NOSQL--05Redis也木有那么“高富帅”

    由于工作慢慢从原来的少量用户的企业内部应用慢慢转化为了大量用户的企业内部应用或者直接转为了线上高并发应用,因而也渐渐的开始使用memcached.Redis等缓存服务器,为了便于自身的学习和记忆,特此 ...

  2. .NET面试题解析(03)-string与字符串操作

      系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 字符串可以说是C#开发中最常用的类型了,也是对系统性能影响很关键的类型,熟练掌握字符串的操作非常重要. 常 ...

  3. js实现打开本地文件或文件夹

    原网址:http://blog.csdn.net/cofesun/article/details/7904887javascript有个特殊的对象ActiveXObject,通过它可以访问window ...

  4. codeforces Gargari and Permutations(DAG+BFS)

    /* 题意:求出多个全排列的lcs! 思路:因为是全排列,所以每一行的每一个数字都不会重复,所以如果有每一个全排列的数字 i 都在数字 j的前面,那么i, j建立一条有向边! 最后用bfs遍历整个图, ...

  5. timus_1007_bfs

    图像编码 题目描述: 有这样一副图,它有黑白像素,黑像素的坐标在1-10之间.有很多种方法来编码这个图.例如下面的图: 一种表示方法是只描述黑像素,并按x坐标的增序描述,如果x相同,则按y的增序描述, ...

  6. 在Python中实现PageFactory模式

    关于 PageFactory 的概念主要是Java中内置了PageFactory类. import org.openqa.selenium.support.PageFactory; …… 例子,htt ...

  7. idea快捷键总结

    使用好快捷键会快很多,这里我慢慢添加我用习惯的快捷键.参考 1.alt+enter 这个几乎万能,有错误提示的时候将光标移动到错误处,然后alt+enter,会给出建议方案:写完一个表达式后,alt+ ...

  8. d

    1.sql题1表名:成绩表姓名   课程       分数张三     语文       81张三     数学       75李四     语文       56李四     数学       9 ...

  9. Go语言接口

    接口是面向对象的必备属性之一,即便是像C语言这种面向过程的语言也可以通过指向函数的指针来实现接口.我们熟知的面向对象语言中更是少不了接口.最近闲了下来,又可以开始学习Go语言了,发现Go语言的接口吸收 ...

  10. 书写高效的CSS

    一.使用高效是CSS ①:使用外联样式替代行间样式或内嵌样式. 不推荐使用内联样式:<style></style> 不推荐使用内嵌样式:<p style="&q ...