jQuery版Tab标签切换


Posted in Javascript onMarch 16, 2011

鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换

效果图:
jQuery版Tab标签切换
源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Tab标签切换</title> 
</head> 
<style> 
body{ background:#fff;} 
*{ margin:0; padding:0;} 
.box{ margin:20px; } 
.container{background:#FFF; width:500px; clear:both; margin-top:1px; _margin-top:-1px;} 
.sub-con{height:300px; width:500px;border:1px solid #3CF; background:#FFF; display:none;} 
.cur-sub-con{ display:block;} 
.sub-con a{ line-height:40px} 
.sub-con p{ text-align:center} 
.nav{ width:370px; height:28px; margin-left:10px;} 
.nav ul{width:370px; height:28px;} 
.nav ul li{ list-style:none; display:inline-block;width:60px; height:28px;line-height:28px; text-align:center;margin-left:-9px;*float:left;*margin-left:-1px;} 
.nav ul li a{ background:#fff;border:1px solid #3CF; text-decoration:none; color:#000; height:28px;display:block;} 
.nav ul li a:hover{ background:#CCEDFB} 
.nav ul li a.cur{ z-index:9999;border-bottom:1px solid #FFF; color:#F00;} 
</style> 
<body> 
<div class="box"> 
<div class="nav"> 
<ul> 
<li><a href="javascript:void(0)" class="cur">Tab项1</a></li> 
<li><a href="javascript:void(0)">Tab项2</a></li> 
<li><a href="javascript:void(0)">Tab项3</a></li> 
<li><a href="javascript:void(0)">Tab项4</a></li> 
</ul> 
</div> 
<div class="container"> 
<div class="sub-con cur-sub-con"> <a href="#" title="这是容器1">这是容器1</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img001.jpg" /></p></div> 
<div class="sub-con"> <a href="#" title="这是容器2">这是容器2</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g02.jpg" /></p></div> 
<div class="sub-con"> <a href="#" title="这是容器3">这是容器3</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g03.jpg" /></p></div> 
<div class="sub-con"> <a href="#" title="这是容器4">这是容器4</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g04.jpg" /></p></div> 
</div> 
</div> 
</body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var intervalID; 
var curLi; 
$(".nav li a").mouseover(function(){ 
curLi=$(this); 
intervalID=setInterval(onMouseOver,250);//鼠标移入的时候有一定的延时才会切换到所在项,防止用户不经意的操作 
}); 
function onMouseOver(){ 
$(".cur-sub-con").removeClass("cur-sub-con"); 
$(".sub-con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con"); 
$(".cur").removeClass("cur"); 
curLi.addClass("cur"); 
} 
$(".nav li a").mouseout(function(){ 
clearInterval(intervalID); 
}); $(".nav li a").click(function(){//鼠标点击也可以切换 
clearInterval(intervalID); 
$(".cur-sub-con").removeClass("cur-sub-con"); 
$(".sub-con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con"); 
$(".cur").removeClass("cur"); 
curLi.addClass("cur"); 
}); 
}); 
</script> 
</html>
Javascript 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 #Javascript
jquery radio 操作代码
Mar 16 #Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 #Javascript
初识JQuery 实例一(first)
Mar 16 #Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 #Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 #Javascript
jQuery前台数据获取实现代码
Mar 16 #Javascript
You might like
PHP4之真OO
2006/10/09 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
求职自荐书范文
2013/12/04 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
财经学院自荐信范文
2014/02/02 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
企业标语口号
2014/06/10 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Python基础之条件语句详解
2021/06/16 Python