基于JQuery1.4 Tab选项卡一行代码轻松搞定

2010年2月9日吉光片羽 8

Tab选项卡是个时髦的界面应用效果，目前在网站中的应用越来越广泛，好处不用多说，最直接的就是节省了网站的版块面积。所以在大型的门户网站里，这个应用已经滥掉了。但是不同的开发人员，写出来的选项卡运行代码也各不相同，不敢说谁的是最好，最简单的。但今天，我这个没有JS基础的门外汉，要带给大家的是，基于JQuery1.4的Tab选项卡，如果不考究代码的阅读方便以及运行效率，确实是一行就能搞定的哦。当然，在这之前，大伙可以先去观摩现有的比较完善的6个出色的基于JQuery的Tab选项卡实例。

废话不多说，快来看看能简单到什么程度吧，先给出HMTL代码：

<div> <b>标题1</b> <b>标题2</b> <b>标题3</b> <p>标题1内容</p> <p>标题2内容</p> <p>标题3内容</p> </div>

下来是必要的CSS代码：

.active{color:#F00}

接着就是关键的JQuery代码了：

$("div b:first").addClass("active");$("div p:gt(0)").hide();$("div b").click(function(){$(this).addClass("active").siblings("b").removeClass();$("div p:eq("+$(this).index()+")").show().siblings("p").hide();});

当然，根据HMTL代码的不同结构，JS代码可以写得更为简单，因为我有代码洁癖，所以能省的都省了。需要注意的是，如果需要一个页面应用多个TAB选项卡效果，就如同我博客的侧栏（这个使用1.3写的小插件，尚不完善。）的多个应用，可能还需再完善。这里只是给出了一个最简便的思路，就是利用index()！

欢迎给出不同看法，或者更好的解决方案，感谢大家的关注与支持！下面就请看实例吧：

HTML :\ Ctrl+A 全部选择提示：你可先修改部分代码，再按运行运行此代码: <html><html> <head> <title>基于JQuery1.4 Tab选项卡一行代码轻松搞定</title> <style> .active{color:#F00} </style> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery","1.4.1"); google.setOnLoadCallback( function(){ $(function(){ $("div b:first").addClass("active"); $("div p:gt(0)").hide(); $("div b").click(function(){ $(this).addClass("active").siblings("b").removeClass(); $("div p:eq("+$(this).index()+")").show().siblings("p").hide(); }); }); }); </script> </head> <body> <div> <b>标题1</b> <b>标题2</b> <b>标题3</b> <p> <a href="http://www.taono.cn">淘宝导购站</a> </p> <p> <a href="http://www.shinubi.net">史努比中文网</a> </p> <p> <a href="http://www.pjzone.cn">中文酷博聚合</a> </p> </div> IE用户可能有必要<button onclick="window.location.reload()">点此刷新查看效果</button>。 </body> </html>

© 版权声明：

本文为吉光片羽原创，遵循知识共享许可协议，转载（全文或部分文字）请务必注明作者：吉光片羽，及本文地址。谢谢合作！
文中所引用的部分图片或文字等资源版权归原作者所有，如果侵犯了您的权益，请在下方评论提出，我会尽快处理。

已有人对此文发表了评论

行者 2010-7-16 1:19:52 回复
index，确实很好用。做了一个小补充。

if (index != 2){//隐藏最后一项竖线
$($tab.get(2)).addClass("last");
}
文章请参见，原理同。
http://www.k68.org/?p=302
吉光片羽于 2010-7-19 12:12:40 回复
是呢，不过不知道index()的效率如何。
Panda 2010-4-29 11:05:06 回复
BTW.建议HTML结构改为
＜ｄｌ＞
＜ｄｔ＞标题一＜／ｄｔ＞
＜ｄｄ＞内容一＜／ｄｄ＞
＜ｄｔ＞标题二＜／ｄｔ＞
＜ｄｄ＞内容二＜／ｄｄ＞
＜／ｄｌ＞
Panda 2010-4-29 11:02:22 回复
从HTML结构来说，标题和内容分为标题块和内容块，这样对搜索引擎来说很难理解标题和内容之间的关系，合理的结构应该是标题一接着内容一、标题二接这内容二。
吉光片羽于 2010-4-29 13:44:58 回复
对，这也是我最近一直在考虑的问题，正准备讨论一下这个话题的说，很高兴我的想法跟你一样，只是这样的结构就需要CSS来将界面合理化了，确实要好好探究一下。
时尚美女 2010-4-26 14:59:43 回复
学习了。ie是可恶！
吉光片羽于 2010-4-26 20:14:21 回复
其实也不能完全怪IE，虽然最新的IE9也不完全咋地，但造成它六哥与世长存的主要还是盗版系统和国人的坏习惯。
phy 2010-4-23 11:32:03 回复
拜托这叫做一行……
吉光片羽于 2010-4-23 15:49:03 回复
第一二行其实用CSS3就可以，但是倒霉的IE总在扯后腿，其实这个真的可以是一行。嘿嘿。
威言威语 2010-2-27 12:46:59 回复
哈哈，简介我喜欢，这个很好~
吉光片羽于 2010-3-4 19:45:18 回复
谢谢，也期待你出好作品，哈哈。
nobird 2010-2-11 3:56:28 回复
zblog内置的jq貌似相当长一段时间内都不会更新...难道要加两个jq在页面么///
吉光片羽于 2010-2-11 11:08:56 回复
关于更新的问题，HP已经被我折磨过几次了，呵呵。确实会牵扯到一些文件，但真正要更新应该也不难的。反正我的博客和淘宝导购网都是用了两个JQ，但是如果使用验证码功能会有冲突。希望1.9会一齐更新吧！
Solin 2010-2-9 17:42:58 回复
很不錯，夠簡潔。
吉光片羽于 2010-2-9 22:07:29 回复
呵呵，有洁癖，没办法，哈哈。

★吉光片羽是壹穜風格★

Web Front-end Developer & Freelance Designer