jQuery 实现 tab 切换一例

周四,2009 六 11 18:57:42

对于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>

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

上一篇：浅议Web网页Form表单设计技巧

下一篇：主题Dreamy更新到v2.0 [06-18 00:08]