Aug152010

Jquery版TAB切换

作者：William   发布：2010-08-15 19:01   分类：Design   阅读：2,683次   29条评论  

　　又到周末休息，不过上海的天气实在是太热了，都40°了，我住的房间没有空调热的不行，哎，怎么夏天还不结束呢？出去绝对是一件非常不明智的选择，于是一天都没有出去，呆在房间里面上网，研究Jquery。
　　Jquery确实是一件好东西，越看越喜欢。现在博客上用的Jquery效果其实是不多的，所以还要大力的在博客中发展Jquery，充分的利用资源。
　　记得很久之前写的侧边栏TAB切换，那个不是Jquery的，于是想捣腾一个Jquery版的。
　　之前在一个WordPress的博客中看到过一个非常不错的TAB切换样式，在切换的同时还有伸展收缩的效果。于是想整到我的侧边栏上去。开始只是用了一次，实现了效果。因为的我的侧边栏有2处用TAB的，当我再用一次Jquery的效果的时候，问题出现了，点击下面的一组TAB，上面全部收缩起来，后来一想ID定义重复了，ID可以有唯一性，我弄2个一样的ID怎么行，终于改成功了。
　　然后重新调整CSS，让其符合自己博客的风格。终于看似一些都正常了。于是我开始测试各个浏览器，IE系列正常，FireFox，Opera，Safari都正常，竟然Chrome不正常，很是奇怪哦，连IE都正常了Chrome竟然没效果。于是又开始调试Chrome，终于将其给整正常了，终于可以欣慰的吐一口气了。
　　本地调试正常，于是我就替换到了网站上去，这是有朋友发表了评论，新发表的评论是要审核，当我点击审核通过的时候，竟然发现无法点击，回复按钮也失效了，我想应该是脚本冲突了。然后查找问题来源。原来是对$的定义的问题，Jquery对$有自己的定义，而PJ原始的对$也有定义，现在两个定义冲突了，于是想到修改PJ自带的脚本，将$替换掉，然后发现评论审核和回复正常了，但是新的问题又来了。要改的话就得把原来的$都替换掉，这是个庞大的过程，很容易出错的，于是乎我就放弃了在侧边栏用Jquery的TAB切换了。
　　预览地址 更换WordPress之后，不支持ASP，预览不了了。
　　不过后来想想还有点不甘心，于是整了一个单独页面的Jquery版的TAB切换。好歹我也是花了点时间研究的。
　　上面一个用的鼠标点击切换的，下面那个用的鼠标滑过切换。其实我一直取舍不了是用点击好还是滑过。各有各个优势，你们认为呢？

WordPress版的也已经出了，具体点击这里：http://www.weisay.com/blog/wordpress-jquery-tab.html

历史上的今天：

  1. 2008:  PJBlog皮肤『秋之恋曲』(2)
  2. 2007:  下载Visual.C++ 6.0.with.SP6.大企业集成安装版(0)

本文固定链接: http://www.weisay.com/blog/jquery-tab-switch.html | 威言威语

该日志由 William 于2010年08月15日发表在 Design 分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: Jquery版TAB切换 | 威言威语
关键字: ,
【上一篇】
【下一篇】

您可能还会对这些文章感兴趣！

  1. JQuery+CSS实现分类菜单前面不同的图标(55)
  2. JQuery鼠标滑动实现图片对比(55)
  3. JQuery横向纵向手风琴切换效果(58)
  4. CSS3 Google Android小机器人(71)
  5. WordPress侧边栏JQuery版TAB选项卡(63)
  6. 腾讯微博API接口JQuery插件 震撼发布(64)
  7. JQuery解决IE6不支持CSS hover伪类[Linux(23)
  8. 首页小小的改版了下(18)
  9. JQuery版返回顶部(32)
  10. 和谐，和谐(5)
  11. PJBlog侧边栏整合tab(滑动)选项卡(增加多个调用(15)

Jquery版TAB切换：目前有29 条留言

  1. 28楼
    song Maxthon Windows :

    滑过的好，让别人省不少事嘛，我们就是要把顾客想象成傻瓜和少爷，让他们动的越少越好，看到的越多越好~~~我们经理说的话

    2011-01-06 00:25 [回复]
  2. 27楼
    surda 360安全浏览器 Windows :

    <meta 标签没有闭合 description输出到页面了。

    2010-09-07 20:52 [回复]
    • William Maxthon Windows :

      不是没有闭合，是因为之前用PJ的时候在摘要里面放了图片，转换过来的时候出现了点问题，正在逐步修正呢~

      2010-09-08 08:10 [回复]
  3. 26楼
    test Unknow Browser Unknow Os :

    Just have a test!

    2010-08-23 18:03 [回复]
  4. 25楼
    老七 Unknow Browser Unknow Os :

    厦门也热。我也在研究JQ。。。

    William 于 2010-08-21 08:17 AM 回复
    想真正凉快下来还学要一个月。
    Jquery太强大了，努力学习中。

    2010-08-21 11:39 [回复]
  5. 24楼
    可爱宝 Unknow Browser Unknow Os :

    博客上方的标题栏不错，越来越有“苹果”的味道了！

    William 于 2010-08-20 08:15 PM 回复
    其实这个就是仿的苹果的界面，哈哈~

    2010-08-20 18:40 [回复]
  6. 23楼
    Lvtu Unknow Browser Unknow Os :

    广东这边温度也那么高呀！
    整天都是头晕晕的！

    William 于 2010-08-20 05:35 PM 回复
    上海这边最近两天还好，下了几场雨，温度稍稍降了下来了~

    2010-08-20 17:19 [回复]
  7. 22楼
    学夫子 Unknow Browser Unknow Os :

    这样的博客就很有动感，你已经是设计师啦，呵呵

    William 于 2010-08-20 05:38 PM 回复
    设计师还谈不上，自己没事的时候瞎折腾罢了~呵呵

    2010-08-20 14:35 [回复]
  8. 21楼
    ikeeptrying Unknow Browser Unknow Os :

    其实我也是第一次来

    William 于 2010-08-18 10:18 PM 回复
    欢迎以后常来~呵呵

    2010-08-18 21:38 [回复]
  9. 20楼
    任侠 Unknow Browser Unknow Os :

    40°。。已经立秋了的，确实算得上火炉了

    2010-08-18 20:13 [回复]
  10. 19楼
    七七 Unknow Browser Unknow Os :

    の比较喜欢触摸滑动，呵呵

    William 于 2010-08-18 04:21 PM 回复
    看来喜欢触摸滑动的人比较多么~

    2010-08-18 15:49 [回复]
  11. 18楼
    混子 Unknow Browser Unknow Os :

    小威就是强大 哎！！！学习中

    William 于 2010-08-18 04:20 PM 回复
    呵呵，低调低调~

    2010-08-18 14:54 [回复]
  12. 17楼
    mndsoft Unknow Browser Unknow Os :

    小威，上次要求麻烦调整的PJskin好了没，期待早点结束哦，谢谢

    William 于 2010-08-18 12:45 AM 回复
    恩，我知道的，最近有点小忙，今天晚上应该会弄好的~

    2010-08-18 12:33 [回复]
  13. 16楼
    jacksuc Unknow Browser Unknow Os :

    你自己写的？网上应该很多啊。

    William 于 2010-08-18 12:28 AM 回复
    不是我写的，我是拿来主义了~呵呵，调整了适合PJ而已~不过最后由于$冲突，只好做了个单独的页面自己瞟瞟~

    2010-08-18 10:52 [回复]
  14. 15楼
    左岸岛 Unknow Browser Unknow Os :

    呵呵，又有新的东东诞生？
    本来一直都有想啃JAVA的冲动，后来在一个学长的言论之下把此种冲动给灭了……还是老老实实啃C++去了……

    William 于 2010-08-18 09:01 AM 回复
    现在学JAVA的太多，还是学C和C++的吃香~

    2010-08-18 00:49 [回复]
  15. 14楼
    feln Unknow Browser Unknow Os :

    威兄，老是能跟上时代的步伐！！！

    William 于 2010-08-17 04:16 PM 回复
    其实是在瞎折腾，追求前端效果而已。

    2010-08-17 16:09 [回复]
  16. 13楼
    月末部落 Unknow Browser Unknow Os :

    触摸的，对于俺来说少操作一次就是人性化

    William 于 2010-08-17 04:16 PM 回复
    恩，是的。我也比较喜欢触摸滑动了，方便~

    2010-08-17 13:53 [回复]
  17. 12楼
    混子 Unknow Browser Unknow Os :

    第一次来 多看看 多学学 嘿嘿

    William 于 2010-08-17 10:18 AM 回复
    哈哈，互相交流，互相学习~

    2010-08-17 10:11 [回复]
  18. 11楼
    竹海听涛 Unknow Browser Unknow Os :

    感谢 威大 模仿成功
    谢谢 囫囵吞枣的 模仿成功 百度了解了下 威大 快点加油 我业余的 跟到你后边 学点够用就可以 嘿嘿

    William 于 2010-08-17 08:17 AM 回复
    你谦虚了，其实我也是仿的人家的，哈哈~
    先模仿，再自己创新，这样学到新东西~

    2010-08-17 13:52 [回复]
  19. 10楼
    宿迁学院论坛 Unknow Browser Unknow Os :

    jQ很强大的 我那个tab也是jQ的
    呵呵 我还是海天 最新宣传下论坛 打扰了
    七夕节快乐哦~

    William 于 2010-08-16 10:25 PM 回复
    怎么感觉上面Logo的边缘很不平滑啊，png的图片不至于这样吧~

    2010-08-16 22:08 [回复]
  20. 9楼
    竹海听涛 Unknow Browser Unknow Os :

    七夕快乐….
    在研究你那个 页面加载中的代码

    William 于 2010-08-16 10:23 PM 回复
    是么，不过PJ上的冲突了，不然是个不错的效果~

    2010-08-16 21:21 [回复]
  21. 8楼
    粉丝淘 Unknow Browser Unknow Os :

    粉丝淘来踩了！小站不错 感谢分享~O(∩_∩)O~

    2010-08-17 01:27 [回复]
  22. 7楼
    WordPress啦 Unknow Browser Unknow Os :

    七夕快乐！

    William 于 2010-08-16 05:38 PM 回复
    同乐~

    2010-08-16 16:49 [回复]
  23. 6楼
    mndsoft Unknow Browser Unknow Os :

    Jquery 技术不错，好像pj组员 情留メ蚊子一直建议并力行采用这种技术框架，期待…

    William 于 2010-08-16 05:36 PM 回复
    现在PJ与Jquery的兼容不好，容易冲突，之前Pj就没有用过Jquery过。不过Jquery是一个强大的JS库~很值得研究

    2010-08-16 15:14 [回复]
  24. 5楼
    彼岸 Unknow Browser Unknow Os :

    我也曾在点击切换还是鼠标滑过切换的问题上犹豫过，最后还是选择了点击切换。哈哈~

    William 于 2010-08-16 05:32 PM 回复
    我自己更倾向于滑过切换，点击也是要花费力气的。嘿嘿

    2010-08-16 08:50 [回复]
  25. 4楼
    苏扬 Unknow Browser Unknow Os :

    看来我还是对PJ不熟悉啊 哈！

    William 于 2010-08-15 10:06 PM 回复
    嘿嘿，我研究PJ多年，多少还是熟悉那么一些滴~

    2010-08-15 21:41 [回复]
  26. 地板
    木本无心 Unknow Browser Unknow Os :

    那是我老婆@@@@

    William 于 2010-08-15 09:40 PM 回复
    这么漂亮，额，我眼馋的啦，口水都出来了~

    2010-08-15 21:33 [回复]
  27. 板凳
    苏扬 Unknow Browser Unknow Os :

    写了半天的评论 结果验证码错误 悲剧

    William 于 2010-08-15 09:39 PM 回复
    额，以后发表评论，可以先复制一下，然后点击发布，这样可以大大的减少这样的失误，我都是这么干的，嘿嘿~

    2010-08-15 21:27 [回复]
  28. 沙发
    木本无心 Unknow Browser Unknow Os :

    哈，沙发。

    William 于 2010-08-15 08:50 PM 回复
    呦，换美女头像了歪~

    2010-08-15 20:16 [回复]

发表评论


快捷键：Ctrl+Enter

大家赞助