jQuery 实现 tab 切换一例

对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用而已。没什么可研究的；关健还在于怎样灵活运用。达到举一反三的效果；
先看下效果图；

jQuerytab

下面我就不做注释了，直接贴代码了。

<!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>jQuery Tabs By Await http://leotheme.cn/</title> <style> * { margin:0 auto; padding:0; font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px; } ul { list-style: none;} p {width: 450px; border:1px solid #88AAD6; padding: 5px 10px; text-align: right;} .tabbox{ position: relative; width:450px; height: 140px; margin:0 auto; border:1px solid #88AAD6; margin-top: 100px; padding: 10px;} .tabnavi { position: relative; left: 0; top: 0; z-index: 999; float: left;} .tabnavi li{ width:80px; height:24px; font-weight:bold; line-height: 24px; margin: 10px 0; border:1px solid #88AAD6; background:#eeeeff; color:#999; text-align:center;} .tabnavi li.current{ background:#fff; border-right: 1px solid #fff; color:#290052; } .tabContent{ position: relative; z-index: 99;float:left; margin-left: -1px; border:1px solid #88AAD6; padding:10px; width:347px; height:120px; } .clear {clear: both;} </style> <script type="text/javascript" src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <script> $(function(){ $(".tabContent div:not(:first)").hide(); $(".tabnavi li").each(function(index){ $(this).click( function(){ $(".tabnavi li.current").removeClass("current"); $(this).addClass("current"); $(".tabContent > div:visible").hide(); $(".tabContent div:eq(" + index + ")").show(); }) }) }) </script> </head> <body> <div class="tabbox"> <ul class="tabnavi"> <li class="current">首页</li> <li>关于</li> <li>相册</li> </ul> <div class="tabContent"> <div>http://leotheme.cn/</div> <div>http://leotheme.cn/about</div> <div>http://leotheme.cn/photo</div> </div> <div class="clear"></div> </div> <p>By Await 2009:06:11</p> </body> </html>

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

jQuery tab 切换前端交互

GOTOP11 条评论 To jQuery 实现 tab 切换一例

卡布说道：

2010-08-27 15:20 下午

火狐里面不行

回复
求索阁说道：

2010-08-12 21:00 下午

我这测试也不行~~啊

回复
beiku 说道：

2009-06-13 18:03 下午

看不明白／代码白痴

回复
LAONB 说道：

2009-06-12 20:38 下午

呵呵，就是滑动门。我这里测试通过。

回复
that5 说道：

2009-06-12 17:11 下午

你们都是高人，我仰视

回复
bolo 说道：

2009-06-11 20:34 下午

貌似代码不能正常运行

回复
- 等待说道：
  
  2009-06-11 22:50 下午
  
  因为jQuery没有加载进来。得多刷几次。你可在复制代码在本地测试
- schiy 说道：
  
  2009-06-12 09:35 上午
  
  事实上刷了好几次也不行，在本地也不行~
- 等待说道：
  
  2009-06-12 11:17 上午
  
  现在可以了！是JQ的版本问题
- schiy 说道：
  
  2009-06-13 18:01 下午
  
  果然厉害^_^
LAONB 说道：

2009-06-11 20:13 下午

先坐沙发，再漫漫看。

回复

jQuery 实现 tab 切换一例

GOTOP11 条评论 To jQuery 实现 tab 切换一例

发表评论取消回复

分类

赞助商链接

前端交互下的最新文章

最新评论

一些朋友

链接

jQuery 实现 tab 切换一例

GOTOP11 条评论 To jQuery 实现 tab 切换一例

发表评论 取消回复

分类

赞助商链接

前端交互下的最新文章

最新评论

一些朋友

链接

发表评论取消回复