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. ::after::before清除浮动原理

    先来看一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  2. 如何用sublime 编写sass

    使用了Sublime Text也有一段时日了,然后在现在而言,小觉的coding工具已经非其莫属了,接着小觉因为近期忙着项目的原因,同时还要抽空编辑博客的原因,就暂时把它放在一旁了,现在偶然想起也就说 ...

  3. js中的一个方法怎么将数据主动传给另一个方法

    项目有这样的一个需求,一个不断接收实时数据的有返回值的js方法Function A在运行,同时我想将接收到的这些数据进行分解提取想要的部分并传给Function B.如何实现? Function A( ...

  4. jQuery 插件简单模板

    /*! * Copyright yunos.com All rights reserved. * jquery.scrollspy.js * @author v10258@qq.com * @vers ...

  5. Azure China (1) Azure公有云落地中国

    <Windows Azure Platform 系列文章目录> 微软公有云Microsoft Azure已经落地中国,官方网址:http://www.windowsazure.cn/. 在 ...

  6. Windows Azure Cloud Service (36) 在Azure Cloud Service配置SSL证书

    <Windows Azure Platform 系列文章目录> 在某些时候,我们需要在Azure PaaS Cloud Service配置HTTPS连接.本章将介绍如何在本地创建证书,然后 ...

  7. 音频文件解析(二)：WAV格式文件波形绘制

    解析WAV头部信息后,接下来就可以根据相关参数和DATA块数据绘制波形. 1.重新编码(转换为8bits,单声道数据) Public Function GetFormatData(ByVal pDat ...

  8. Clr编写Insert Triggr

    在CLR编写一个插入娄据的触发器. 这个触发器是当对表插入数据时,即时把刚才插入的数据显示出来: 可复制代码: public static void tri_RetrieveJustInsertedD ...

  9. 【UWP】FlipView绑定ItemsSource，Selectedindex的问题

    最近在做列表头部的Carousel展示,Carousel使用的是FlipView展示,另外使用ListBox显示当前页,如下图 我们先设置一个绑定的数据源 public class GlobalRes ...

  10. 利用chardet检测网页编码

    环境:Win7_x64 + python3.4.3 需要先下载chardet并进行安装,下载地址:https://pypi.python.org/packages/source/c/chardet/c ...