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 相关文章推荐
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
javascript中match函数的用法小结
Feb 08 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
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
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
javascript里的条件判断
2007/02/27 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python实现多张图片拼接成大图
2019/01/15 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
大一学生职业生涯规划
2014/03/11 职场文书
特教教师先进事迹
2014/05/21 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
搬迁通知
2015/04/20 职场文书
一年级语文教学随笔
2015/08/14 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL