刚开始拿到这个页面(基本结构如左图)的时候,我首先想的是分别给这个两个做Tab 切换的效果,不过,那样的话可能就需要给它们两个分别加上id以分别获取,并且要分别写js代码,这样一来的话,我可能就会多写一些代码,仔细一想不可取!

所以一直在想有没有其它的方法呢?比如在不改动任何html的情况,并且不写重复js代码的情况下,来达到这种效果。前些天在jQuery森林群里,看到有人用 jQuery(expression,[context]) 解决了一个比较棘手的问题,所以在解决这个小问题上,也理所当然的想起了这个方法。

于是就想起了今天要分享的这个方法,下面就是全部JS代码:

先分享代码先, 有用的自有用。

通过这段代码我们就可样实现任意多个具有同样html结构的Tab切换的功能,像一些比较大的门户网站,他们在首页经常的会有这种切换,我没有研究过他们的这种多个的tab切换是怎么实现的,或许是分别给写一段基本一样的代码,也或许比我现在的代码更简单。但不管怎么,这是自己在学习jQuery中的一点小小的收获和总结,分享出来,以展现互联网伟大的分享精神。

需要补充的是:通过这段代码,你可以扩展任意多个的tab切换,目前我的这个sample只有两个,当前你也可以在里面写任意多个,都可以实现这种效果,而且互不影响。

<<全文完毕>>