当前位置 > 首页 > 个人随笔 > 最简单的代码实现Tab

最简单的代码实现Tab

2010年05月18日   作者： Artcss     类别：个人随笔

1151 views | 2 条评论

分享到: 百度 QQ空间 微博 豆瓣 人人 开心 QQ书签

在工作中经常遇到这种Tab切换效果，网上这种效果也是一搜一大堆，但不一定完全适合自己。写过许多次后，发现了一种方法不但代码简洁，而且调用方便，所以分享给大家。

这是基于jquery写的一个Tab，选项卡标题的id和选项卡内容class的名称保持一致即可。

用到的javascript代码如下:

Download oTab.js
1
2
3
4
5
6
7
8
9

$(function(){
function oTab (){
	$(this).addClass("current").siblings().removeClass("current").parent().siblings()
	.hide().siblings("."+$(this).attr("id")).show();
}
//调用方法
$(".tabt span,.tabt2 span").mouseover(oTab);//同时调用两个或以上
$(".tabt3 span").click(oTab);
});
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

下面是添加了定时器，tab自动切换的效果

用到的javascript代码如下:
Download oTab.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$(function(){
var i=0;
function oTab (){
	$(this).addClass("current").siblings().removeClass("current").parent().siblings()
	.hide().siblings("."+$(this).attr("id")).show();
	i = $(".tabt4 span").index(this);
}
//切换函数
function oStart(i){
	$(".tabt4 span").eq(i).addClass("current").siblings().removeClass("current");
	$("#auto dd").eq(i).show().siblings("dd").hide();
}
//自动切换
function oTimer(){
	oStart(i);
	i++;
	if(i==4) {
		i=0;
	}
}
//设置定时器
var myTimer = setInterval(oTimer,1000);
//鼠标悬停和移开的情况用hover
$("#auto").hover(function(){
	if(myTimer) {
		clearInterval(myTimer);
	}
},function(){
	myTimer = setInterval(oTimer,1000);
});
//调用方法
$(".tabt span,.tabt2 span,.tabt4 span").mouseover(oTab);
$(".tabt3 span").click(oTab);
});
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

相关博文

标签：, , ,

相关日志

Comments

2 条评论 关于“最简单的代码实现Tab”
  1. QQ农场 说：
    2010/07/20 于 4:26 上午

    很不错哦。

Trackbacks

看看别人怎么评价本文...
  1. SteepVi's Blog – 肥皂泡的简单生活 » jQuery：一行的切换tab代码 说：
    2010/05/19 于 1:54 上午

    [...] 【转】http://www.artcss.com/?p=762 你可能还会关心这些2010/05/17 — jQuery：$post、$get、$ajax与php，实现异步加载。2010/05/13 — jQuery：垂直洋葱皮折叠、展开效果 – 多用于侧边栏目的展示2010/04/29 — jQuery：noConflict()解决多库共存的问题2010/04/01 — Jquery：内容简介更多展开收缩效果 2010/03/04 — Lazy Loader Plugin-延迟加载图片jquery插件 上一篇文章： 下一篇文章：jQuery：$post、$get、$ajax与php，实现异步加载。 $("#loadpercent").animate({width:"67px"}) [...]



给作者留言：