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

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()！

 

原文来自：吉光片羽 http://www.jgpy.cn/blog/front-end/easily_tab_with_jquery_14.htm