html tab切换jquery,jQuery版Tab标签切换
鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换
效果图:
源代码:
Tab标签切换
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;}
- Tab项1
- Tab项2
- Tab项3
- Tab项4
$(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");
});
});
html tab切换jquery,jQuery版Tab标签切换相关推荐
- jquery+video 鼠标滑动标签切换video中的视频资源,暂停未播放视频
效果视频: https://v.qq.com/x/page/k3240mov9xh.html html代码: <div class="videoBox"><vid ...
- android网络切换socket,Android版的websocket切换网络无法重连
- 当前 Bug 的表现(可附上截图) 1.android微信使用websocket切换网络时一般都无法重连,有时候重启微信也没用,需要重启手机才能连上.移动或联通网络切换到电信网络特别容易出现. 2 ...
- jQuery bind事件练习及tab标签切换的实现
1.bind事件 jQuery部分代码: <script type="text/javascript"> $(document).ready(function(){ ...
- 基于jQuery实现tab选项卡【js实现页签切换】
任务描述 本关任务:用jquery实现一个tab切换的功能. 效果图如下: 相关知识 为了完成本关任务,你需要掌握:1.层次选择器,2.方法show和hide, 3.操作css类的方法. 层次选择器 ...
- html tab与jQuery,js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 *{margin: 0;padding: 0;} #myul li {li ...
- js + jquery 两栏Tab鼠标移入显示/隐藏的效果(详)
学习文献: 必须要掌握的原生JS实现JQuery 了解了这些才能开始发挥jQuery的威力 - 谦行 – JavaScript和jQuery两款TAB选项卡示例 -- 西门 jquery原创分享社区 ...
- 1~22(面向编程+ES6中的类和对象+类的继承+面向对象版tab栏切换)
1 面向对象编程介绍 1.1 两大编程思想 面向过程 面向对象 1.2 面向过程编程POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤,然后用函 ...
- 仿麦包包首页tab轮换图jQuery
仿麦包包首页tab轮换图jQuery 前几天,天外飞仙闲着无意打开麦包包,看到简洁的焦点图,觉得有意思,试试自己练手下. 刚开始,做的有些问题,里面有个样式,我是直接.bks的,不管如何都无法渲染该样 ...
- 仿麦包包首页tab轮换图jQuery(转自www.jqueryba.com)
仿麦包包首页tab轮换图jQuery 前几天,天外飞仙闲着无意打开麦包包,看到简洁的焦点图,觉得有意思,试试自己练手下. 刚开始,做的有些问题,里面有个样式,我是直接.bks的,不管如何都无法渲染该样 ...
最新文章
- 《C语言及程序设计》实践参考——水仙花数
- codewars-013: Ease the StockBroker
- etcd分布式之消息发布与订阅
- wpf template的code写法
- cmd中操作数据库的那些常见命令
- Redis缓存数据库服务器
- HH SaaS电商系统的商品关联版式功能模块设计
- 摩拜大数据杀熟?官方:老用户押金的确退款延迟
- 网页图表Highcharts实践教程之图表代码构成
- linux基础(十一)--系统初始化的简谈
- pgsql转储_十六进制转储如何工作
- three.js场景中看不到模型/看不到阴影
- [51nod1232]完美数
- 关于前端程序员写前端用什么框架更好?
- 锐捷 linux 网卡信息失败,linux折腾日记:校园网锐捷上网设置
- html简单飘窗效果
- 关于微信公众号开发【微信JS-SDK】报错:config invalid url domian
- ANDROID XML图像资源文件详细讲解(一)
- idc机房建设费用_成立一个IDC机房要多少钱
- DeepMind用强化学习探索大脑多巴胺对学习的作用
热门文章
- php制作学生卡片,PHP基础案例一:展示学生资料卡
- python如何实现模拟登录_超详细的Python实现新浪微博模拟登陆(小白都能懂)
- ar路由器 pppoe下发ipv6 dns_IPv6网络设置各种疑难杂症诊疗区
- php response响应,9. 响应 (Response)
- Python中字符串如何定义简单举例
- Shadow Defender 语言文件并注册
- Redis高可用sentinel
- Mybatis下collections使用pageHelper进行分页
- 前端周报:前端面试题及答案总结;JavaScript参数传递的深入理解
- Jmeter响应中中文乱码怎么解决?