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

最简单的代码实现Tab

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

11,000 views | 3 条评论

分享到: 百度 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

3 条评论 关于“最简单的代码实现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"}) [...]

  2. » 封装的前端栏目选项卡(滑动门) 说道：
    2010/10/12 3:09 上午

    [...] 第一种不带自动切换 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; <html xmlns=”http://www.w3.org/1999/xhtml”&gt; <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <meta name=”description” content=”前端思考，专注前端开发，关注用户体验，artskin artcss ” /> <meta name=”keywords” content=”前端思考,artskin,artcss ” /> <script type=”text/javascript” src=”http://www.brucehan.com/bat/js/jq_1.4.js”></script&gt; <title>最简单的弹出层：前端思考</title> <style> *{margin:0;padding:0px;font-family:Microsoft YaHei,Verdana,Arial;} h2{clear:both;padding:10px;font-size:16px;font-weight:normal} .tab{margin-left:10px;float:left;display:inline;} .tab dt{height:20px;} .tab dt span{display:block;width:50px;height:20px;line-height:20px;text-align:center;float:left;margin-right:1px;display:inline;cursor:default;background:#ddd;} .tab dt span.current{background:green;color:#fff;} .tab dd{width:201px;height:100px;font-size:36px;text-align:center;line-height:100px;border:1px solid green;display:none} </style> <script type=”text/javascript”> $(function(){ var i=0; 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); }); </script> </head> <body> <h2>一、鼠标滑过（调用两个）</h2> <dl> <dt> <span id=”t1″>111</span> <span id=”t2″>222</span> <span id=”t3″>333</span> <span id=”t4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <dl> <dt> <span id=”c1″>111</span> <span id=”c2″>222</span> <span id=”c3″>333</span> <span id=”c4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <h2>二、鼠标点击</h2> <dl> <dt> <span id=”d1″>111</span> <span id=”d2″>222</span> <span id=”d3″>333</span> <span id=”d4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> </body> </html> 第二种带自动切换功能！ <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; <html xmlns=”http://www.w3.org/1999/xhtml”&gt; <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <meta name=”description” content=”前端思考，专注前端开发，关注用户体验，artskin artcss ” /> <meta name=”keywords” content=”前端思考,artskin,artcss ” /> <script type=”text/javascript” src=”http://www.artcss.com/js/jq_1.4.js”></script&gt; <title>最简单的弹出层：前端思考</title> <style> *{margin:0;padding:0px;font-family:Microsoft YaHei,Verdana,Arial;} h2{clear:both;padding:10px;font-size:16px;font-weight:normal} .tab{margin-left:10px;float:left;display:inline;} .tab dt{height:20px;} .tab dt span{display:block;width:50px;height:20px;line-height:20px;text-align:center;float:left;margin-right:1px;display:inline;cursor:default;background:#ddd;} .tab dt span.current{background:green;color:#fff;} .tab dd{width:201px;height:100px;font-size:36px;text-align:center;line-height:100px;border:1px solid green;display:none} </style> <script type=”text/javascript”> $(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); }); </script> </head> <body> <h2>一、鼠标滑过（调用两个）</h2> <dl> <dt> <span id=”t1″>111</span> <span id=”t2″>222</span> <span id=”t3″>333</span> <span id=”t4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <dl> <dt> <span id=”c1″>111</span> <span id=”c2″>222</span> <span id=”c3″>333</span> <span id=”c4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <h2>二、鼠标点击</h2> <dl> <dt> <span id=”d1″>111</span> <span id=”d2″>222</span> <span id=”d3″>333</span> <span id=”d4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <h2>三、自动切换</h2> <dl id=”auto”> <dt> <span id=”e1″>111</span> <span id=”e2″>222</span> <span id=”e3″>333</span> <span id=”e4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> </body> </html> 原文出处：前段思考 [...]



给作者留言：