设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 710|回复: 0

[jQuery/Js/AJAX] 基于JQuery的Tab小插件

[复制链接]

374

主题

381

帖子

2558

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2558
发表于 2014-8-9 12:28:48 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
基于JQuery的Tab小插件,css未做美化,请自行美化使用。

演示效果.jpg

代码如下:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Tab 小插件</title>
  6. <style>
  7. .tab{ width:98%;}
  8. .tab_menu ul{ width:98%; list-style:none;}
  9. .tab_menu li{ list-style:none; float:left; margin-right:4px; display:block; border-right:#4488BB solid 1px;border-left:#4488BB solid 1px; border-top:#4488BB solid 1px; cursor:pointer; color:#000; height:20px; width:auto; padding:5px;}
  10. .tab_box{ border:solid #4488BB 1px; padding:4px; height:auto; width:98%; float:left;}
  11. .tab_selected{ background:#4488BB;}
  12. .tab_displayNone{ display:none;}
  13. li{ background:#EEEEEE; list-style:none;}
  14. </style>
  15. </head>
  16. <body>
  17. <div class="tab">
  18. <div class="tab_menu">
  19. <ul>
  20. <li class="tab_selected">JQuery</li>
  21. <li>ExtJs</li>
  22. <li>Sliverlight</li>
  23. </ul>
  24. </div>           
  25. <div class="tab_box">
  26. <div>Hello JQuery!</div>
  27. <div class="tab_displayNone">Hello ExtJs!</div>
  28. <div class="tab_displayNone">Hello Sliverlight!</div>
  29. </div>
  30. </div>
  31. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  32. <script>
  33. (function($){
  34. $.fn.extend({
  35. //Tab插件名称
  36. XQHTab: function(options) {
  37. //默认值
  38. var defaults = {
  39. tabSelected: "tab_selected",
  40. tabWidth: "100%",
  41. autoHeight: "true"
  42. };
  43. var options = $.extend(defaults, options);
  44. $(this).css("width", options.tabWidth);
  45. //选项卡 this指通过当前选择器获取的JQuery对象
  46. var tab = $(".tab_menu ul li", this);
  47. //选项内容
  48. var tabContent = $(".tab_box > div", this);
  49. if (options.autoHeight != "true") {
  50. tabContent.css("height", options.autoHeight);
  51. }
  52. //单击选项卡
  53. tab.click(function() {
  54. $(this).addClass(options.tabSelected).siblings().removeClass(options.tabSelected);
  55. var curIndex = tab.index(this);
  56. tabContent.eq(curIndex).show().siblings().hide();
  57. });
  58. //return this使JQuery方法可链
  59. return this;
  60. }
  61. });
  62. })(jQuery);
  63. </script>
  64. <script type="text/javascript">
  65. $(function() {
  66. $(".tab").XQHTab();
  67. });
  68. </script>
  69. </body>
  70. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-10 20:40

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表