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. switch判断注意点

    if判断,如果判断的两个值类型不同,会继续隐性转换,==,当然如果使用===就不会. 1 if(2=="2"){ 2 console.log("true"); ...

  2. js对象、数组转换字符串

    对象转换成字符串需要使用toString()方法. 1 var a = function(){ 2 console.log(111); 3 }; 4 var b = a.toString(); 5 c ...

  3. hibernate（三）基本配置,log4j、JUnit配置

    一.基本配置 1.<property name="hbm2ddl.auto">update</property> 改项配置有4个选项: validate:当 ...

  4. linux分享六：进程管理

    1:批量杀死进程 ps -ef|grep LOCAL=NO|grep -v grep|cut -c 9-15|xargs kill -9 或kill -9 `ps -ef|grep oracle|aw ...

  5. c#方法重载，可选参数，命名参数。

    其实这里没什么可说哦,c++的语法大同小异.先看一段代码. class Program { public static void Test(int a) { Console.WriteLine(&qu ...

  6. 轻松自动化---selenium-webdriver(python) (八)

    本节重点: 调用js方法 execute_script(script, *args) 在当前窗口/框架 同步执行javaScript 脚本:JavaScript的执行. *参数:适用任何JavaScr ...

  7. 面向对象编程语言中的接口（Interface）

    在大多面向对象的编程语言中都提供了Interface(接口)的概念.如果你事先学过这个概念,那么在谈到“接口测试”时,会不会想起这个概念来!?本篇文章简单介绍一下面向对象编程语言中的Interface ...

  8. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  9. Codrops 教程：基于 CSS3 的精美模态窗口效果

    Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...

  10. Windows Azure Cloud Service (43) 使用Azure In-Role Cache缓存(2)Dedicated Role

    <Windows Azure Platform 系列文章目录> Update 2016-01-12 https://azure.microsoft.com/zh-cn/documentat ...