jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图:
新浪的tab栏切换
淘宝的tab栏切换
其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务器压力较大,而淘宝的是当鼠标放上去2秒左右,才切换,这样,防止不断的来回切换,这个效果我们需要带定时器来控制就好了。
小强老师今天就以淘宝的tab栏切换,利用jquery定时器来做这个效果。
首先先把html 结构书写如下:
<div class="r-hd">
<div class="hd-tittle"> <--tab栏头部分-->
<ul class="aa">
<li class="current"><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 class='cc'> <--下面切换内容-->
<ul class="hd-main" style="display:block">
<li><a href="#" class="hot">阿里全球招募梦想家1</a></li>
<li><a href="#">阿里通信17万人疯抢</a></li>
<li><a href="#">惊艳!新版魔盒初体验</a></li>
<li><a href="#">阿里案例工场开放入驻</a></li>
</ul>
<ul class="hd-main">
<li><a href="#" class="hot">阿里全球招募梦想家2</a></li>
<li><a href="#">阿里通信17万人疯抢</a></li>
<li><a href="#">惊艳!新版魔盒初体验</a></li>
<li><a href="#">阿里案例工场开放入驻</a></li>
</ul>
<ul class="hd-main">
<li><a href="#" class="hot">阿里全球招募梦想家3</a></li>
<li><a href="#">阿里通信17万人疯抢</a></li>
<li><a href="#">惊艳!新版魔盒初体验</a></li>
<li><a href="#">阿里案例工场开放入驻</a></li>
</ul>
<ul class="hd-main">
<li><a href="#" class="hot">阿里全球招募梦想家4</a></li>
<li><a href="#">阿里通信17万人疯抢</a></li>
<li><a href="#">惊艳!新版魔盒初体验</a></li>
<li><a href="#">阿里案例工场开放入驻</a></li>
</ul>
</div>
</div>
接着书写css部分
.r-hd{ height:98px; border:1px solid #eee; width:298px;} /*头部的盒子*/
.hd-tittle{ height:27px; width:298px; position:relative;
overflow:hidden;}
/*ul的父盒子,宽度298px,相对定位可以占住上面的位子,不影响下面的盒子,同时可以用定位流切ul这个定位流*/
.hd-tittle ul{ width:301px; position:absolute; left:-1px;} /*ul的宽度比父盒子大,绝对定位,可以装下五个li,不会换行 向左移动一像素,第一个li的左边框就会压在大盒子上*/
.hd-tittle li{ float:left; width:58px; height:26px; border-bottom:1px
solid #eee; padding:0 1px; background-color:#f7f7f7; line-height:26px;
text-align:center;}
.hd-tittle li.current{ background-color:#fff; border-bottom-color:#fff;
border-right:1px solid #eee; border-left:1px solid #eee; padding:0;
color:#3c3c3c; font-weight:bold;}
/*li里面总宽60,当定义当前的时候没有左右内边距,换成了左右边框*/
.hd-main{ margin:15px;}
.hd-main li{ float:left; width:130px;height:25px; margin-left:2px; }
最后是jquery 特效部分
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".aa li").each(function(index, el) { /* 遍历所有的tab栏目 */
$(this).mouseover(function(event) {
dangqian=$(this); // 获取当前对象
n=setTimeout(fun,500); //开启定时器
function fun(){
dangqian.addClass('current').siblings().removeClass('current'); // 给鼠标当前的tab栏添加css样式
$(".cc ul").eq(index).show().siblings().hide(); // 同时显示与 当前tab栏相应的 下部分内部部分
}
}).mouseout(function(event) {
clearTimeout(n); // 移除定时器
});
});
});
</script>
小强零零壹 与大家一起分享
jQuery带有定时器的tab栏切换的更多相关文章
- jQuery蓝色修边tab标签切换
jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- tab栏切换制作
tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
- tab栏切换的特殊效果
在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...
- tab栏切换,内容为不断实时刷新数据的vue实现方法
先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...
- JavaScript实现Tab栏切换
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...
随机推荐
- OSG项目经验2<在场景中添加文字面版>
添加文字版需要用到osg的三个名字空间: osgText::Text,这个类用来添加文字和设置文字的一些属性: ...
- html常用标签有哪些?
html看似复杂,其实常用的标签并不多,这里总共介绍一些html的常用标签 文字处理: ①标题:<h1> to <h6> ②段落:<p>文字段落</p> ...
- Delphi函数指针的两种定义(对象方法存在一个隐藏参数self,所以不能相互赋值)
delphi中经常见到以下两种定义 Type TMouseProc = procedure (X,Y:integer); TMouseEvent = procedure (X,Y:integer) o ...
- hdu 5269 ZYB loves Xor I(字典树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5269 思路分析:当lowbit(AxorB)=2p 时,表示A与B的二进制表示的0-p-1位相等,第p ...
- 偶然碰到的Win7 64位下CHM 的问题解决
最近下了几个沪江资料,都是chm格式的,但是在win7 64位下,都显示不了里面的音频和视频flash之类的控件,虽然可以通过源文件的方式打开视频文件,但是很麻烦. 网上似乎碰到的人也不是很多, ...
- Port 8081 already in use, packager is either not running or not running correctly
运行 react_native 时发生这个错误,解决办法 关掉端口8081对应的进程 1.打开终端,输入命令:lsof -i:8081 2.此时提示: COMMAND PID USER ...
- 杭电oj A + B Again
A + B Again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- poj2774之最长公共子串
Long Long Message Time Limit: 4000MS Memory Limit: 131072K Total Submissions: 18794 Accepted: 77 ...
- hdu 4782 Beautiful Soupz
模拟.其实这题就是题目比较长而已...读完题目就差不多了.tag直接读就可以了,题目说了不用修改.然后整个题目就是让求text部分,严格按空格分开.注意每行前面空格个数. #include<al ...
- html(第一天,div+css)
一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 ...