Tab切换类型
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切换类型的更多相关文章
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 很好用的Tab标签切换功能,延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
- WPF案例(-)模拟Windows7 Win+Tab切换
原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...
- tab切换插件开发
我开发的tab切换插件,基于jquery库,实现tab标签页的切换.插件的名称为jquery.tabSwitch.js. 插件实现代码如下: ; (function ($) { $.fn.tabSwi ...
- echarts tab 切换问题整理
一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...
- Android典型界面设计——FragmentTabHost+Fragment实现底部tab切换
一.问题描述 在上次博文中,我们使用RadioGroup+ViewPage+Fragmen实现了顶部滑动导航(查看文章:http://www.cnblogs.com/jerehedu/p/460759 ...
- 简单的Tab切换组件
由于代码都有注释,所以不多加解释,大家都知道的.直接贴代码: 代码如下: /** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { ...
- tab切换代码优化
上次的tab切换的代码里面有很多重复的代码,需要做做优化,把重复的代码用函数封装起来调用. 优化前: <script> //获取id封装成一个函数$()方便调用 function $(id ...
- bootstrap中tab切换的使用
文档地址:https://v3.bootcss.com/javascript/#tabs 简单实例: <!DOCTYPE html> <html lang="en" ...
随机推荐
- 关于Thread.currentThread()和this的差异
重新来看多线程时,被这结果搞懵逼了.不多说,直接上代码: public class MyThread02 extends Thread { public MyThread02() { System.o ...
- hibernate(六) cascade(级联)和inverse关系详解
序言 写这篇文章之前,自己也查了很多的资料来搞清楚这两者的关系和各自所做的事情,但是百度一搜,大多数博文感觉说的云里雾里,可能博主自己清楚是怎么一回事,但是给一个不懂的人或者一知半解的人看的话,别人也 ...
- RESTORE DATABASE的standby选项
RESTORE DATABASE [db1] FROM DISK = N'E:\Backup\db2.bak' , MOVE N'db1_Data' TO N'D:\Data\db2.MDF', MO ...
- javascript类型系统——字符串String类型
× 目录 [1]定义 [2]引号 [3]反斜线[4]特点[5]转字符串 前面的话 javascript没有表示单个字符的字符型,只有字符串String类型,字符型相当于仅包含一个字符的字符串 字符串S ...
- 深入理解HTML表格
前面的话 在CSS出现之前,table元素常常用来布局.这种做法在HTML4之后不再推荐使用.而现在有些矫枉过正,使用table展示数据都可能会被说不规范.本文将详细介绍HTML表格table tab ...
- ASProtect注册码使用教程|ASProtect SKE(加壳脱壳工具) 2.56 汉化注册版
ASProtect 是功能非常完善的加壳.加密保护工具.能够在对软件加壳的同时进行各种保护.如:反调试跟踪.自校验及用密钥加密保护等:还有多种限制使用措施,如:使用天数限制.次数限制及对应的注册提醒信 ...
- 在IBM Bluemix上部署Hyperledger应用
简介 IBM Bluemix (http://www.ibm.com/bluemix)是一个基于cloud的应用开发和部署平台,提供包括多种服务和运行环境的支持.对Hyperledger应用开发者而 ...
- Android Studio添加PNG图片报错原因
今天在网上看到一个关于Splash Activity的Android帖子,博主在一通讲解之后也给出了代码.于是果断下载下来了看看怎么实现的.一步步照着流程把这个功能实现了一遍.一切都没有大问题,但是在 ...
- JavaScript基础—插曲02
Js学习基础 1:关于js中的数组 这里面可以是键值对的形式来存储的,我们必须利用forIn来输出,这就相当于foreach一样. var dir = new Array(); dir['0'] = ...
- 我读过的最好的epoll讲解--转自”知乎“
首先我们来定义流的概念,一个流可以是文件,socket,pipe等等可以进行I/O操作的内核对象. 不管是文件,还是套接字,还是管道,我们都可以把他们看作流. 之后我们来讨论I/O的操作,通过read ...