jQuery 实现 tab 切换一例

Aug012010

作者：吉心发布：2010-08-01 09:38 分类：Jquery 阅读：1463 次抢沙发

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

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

<!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>

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

本文固定链接: http://www.ntxz.net/?p=1190 | 周忞 | 吉心的记事本

该日志由吉心于2010年08月01日发表在 Jquery 分类下，你可以发表评论。
在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jQuery 实现 tab 切换一例 | 周忞 | 吉心的记事本
关键字: jquery, tab切换

【上一篇】jQuery实现背景图渐变切换
【下一篇】用jquery写一个简单的菜单伸缩效果

您可能还会对这些文章感兴趣！

jQuery 实现 tab 切换一例：等您坐沙发呢！

发表评论

您必须 [ 登录 ] 才能发表留言！

jQuery 实现 tab 切换一例

您可能还会对这些文章感兴趣！

jQuery 实现 tab 切换一例：等您坐沙发呢！

发表评论

分类目录

最新日志热评日志随机日志

最新评论

标签云集

博客统计

用户登录