jQuery 实现 tab 切换一例

Await / 前端交互 / 2009/06/11 6:57 / 热度(6,770)

对于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 切换前端交互

卡布
2010/08/27

火狐里面不行

回复
求索阁
2010/08/12

我这测试也不行~~啊

回复
beiku
2009/06/13

看不明白／代码白痴

回复
LAONB
2009/06/12

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

回复
that5
2009/06/12

你们都是高人，我仰视

回复
bolo
2009/06/11

貌似代码不能正常运行

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

先坐沙发，再漫漫看。

回复

等待-放飞梦想