jQuery一个小技巧(tip)分享–Tab切换

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

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

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

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

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

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

<<全文完毕>>

这篇文章目前有13条评论

  1. 柳亚 2010-08-08 19:36

    好像我的主题就自带了。。。。

    沙发王 !
    • crossyou 2010-08-09 18:42

      恩 好像你的二级导航是这个效果。

  2. ucer 2010-08-09 00:32

    完了,一下子没弄明白。再看看。。。。哦,明白了。当年为了找这个苦死人了,看到脚本就不爽。

    板凳党 !
  3. ucer 2010-08-09 00:32

    终于看到一个简单的版本了。

    地板砖 !
  4. chinallww 2010-08-15 13:06

    值得收藏,不过感觉有点鸡肋,,

    应该很少会有人用到..

    5 #
  5. @杜德文 2010-08-20 16:32

    之前也学习过一段时间的jQuery 长时间不用 都忘没了。。。

    6 #
  6. Lok 2010-08-26 09:42

    很简洁的代码,请问下这个代码修改下能不能实现鼠标经过切换呢?

    7 #
    • admin 2010-08-26 12:13

      可以的,等下午有时间我发上来。

    • admin 2010-08-27 07:57

      将click修改为hover就可以了。

  7. WSQ 2010-09-06 20:17

    不错的方法。标记一下。
    我一直使用的是使用.attr获取他的id,然后再激活相对的区块(Div).

    8 #
  8. luca 2011-01-11 14:50

    test

    9 #
Leave a Reply

(必填项)

(必填项)

(可选)