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" ...
随机推荐
- switch判断注意点
if判断,如果判断的两个值类型不同,会继续隐性转换,==,当然如果使用===就不会. 1 if(2=="2"){ 2 console.log("true"); ...
- js对象、数组转换字符串
对象转换成字符串需要使用toString()方法. 1 var a = function(){ 2 console.log(111); 3 }; 4 var b = a.toString(); 5 c ...
- hibernate(三)基本配置,log4j、JUnit配置
一.基本配置 1.<property name="hbm2ddl.auto">update</property> 改项配置有4个选项: validate:当 ...
- linux分享六:进程管理
1:批量杀死进程 ps -ef|grep LOCAL=NO|grep -v grep|cut -c 9-15|xargs kill -9 或kill -9 `ps -ef|grep oracle|aw ...
- c#方法重载,可选参数,命名参数。
其实这里没什么可说哦,c++的语法大同小异.先看一段代码. class Program { public static void Test(int a) { Console.WriteLine(&qu ...
- 轻松自动化---selenium-webdriver(python) (八)
本节重点: 调用js方法 execute_script(script, *args) 在当前窗口/框架 同步执行javaScript 脚本:JavaScript的执行. *参数:适用任何JavaScr ...
- 面向对象编程语言中的接口(Interface)
在大多面向对象的编程语言中都提供了Interface(接口)的概念.如果你事先学过这个概念,那么在谈到“接口测试”时,会不会想起这个概念来!?本篇文章简单介绍一下面向对象编程语言中的Interface ...
- 使用 CSS & jQuery 制作一款漂亮的多彩时钟
大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...
- Codrops 教程:基于 CSS3 的精美模态窗口效果
Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...
- 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 ...