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 相关文章推荐
javascript vvorld 在线加密破解方法
Nov 13 Javascript
InnerHtml和InnerText的区别分析
Mar 13 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
Vue Components 数字键盘的实现
Sep 18 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHP学习笔记之二
2011/01/17 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
浅谈php扩展imagick
2014/06/02 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
php常用正则函数实例小结
2016/12/29 PHP
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
vue中的scope使用详解
2017/10/29 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
深入理解Python 多线程
2020/06/16 Python
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
编程输出如下图形
2013/11/24 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
高级销售求职信
2014/02/21 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2014年妇女工作总结
2014/12/06 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
办公用品管理制度
2015/08/04 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
vue 实现上传组件
2021/05/31 Vue.js