简单的jQuery选项卡插件

qiuhaotc 2012-02-19

其实像这类选项卡的插件网上也很多,只是个人觉得自己弄一个更好,毕竟自己弄的东西,自己修改起来也轻松。

原理其实也是很简单的,关键在于样式的定义。

原本想直接使用jquery的 ui,无奈懒得理,感觉jquery ui很强大,但是用起来也很麻烦,要引用的样式也多。主要是样式不好修改。

并且我也只想使用选项卡的功能,何必整这么多样式呢。最主要的还是不好修改样式。

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head runat="server">  
  4.     <title></title>  
  5.     <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  6.     <style type="text/css">  
  7.         a {  
  8.             text-decoration: none;  
  9.         }  
  10.         ul, li, p {  
  11.             list-style-type: none;  
  12.             margin: 0px;  
  13.             padding: 0px;  
  14.             font-size: 12px;  
  15.         }  
  16.         #tabs {  
  17.             width: 600px;  
  18.             border: solid 1px #dddddd;  
  19.             margin: 50px auto;  
  20.             padding: 5px;  
  21.             overflow: hidden;  
  22.             border-top-left-radius: 4px;  
  23.             border-top-right-radius: 4px;  
  24.             border-bottom-left-radius: 4px;  
  25.             border-bottom-right-radius: 4px;  
  26.         }  
  27.         #tabs ul.tabs_header {  
  28.             display: block;  
  29.             position: relative;  
  30.             border-top-left-radius: 4px;  
  31.             border-top-right-radius: 4px;  
  32.             border: 1px solid #aaaaaa;  
  33.             background-color: #cccccc;  
  34.             padding: 5px 5px 0px;  
  35.             clear: both;  
  36.             height: 26px;  
  37.             line-height: 26px;  
  38.         }  
  39.         #tabs ul.tabs_header li {  
  40.             border: solid 1px #d3d3d3;  
  41.             border-bottom: 0 none !important;  
  42.             float: left;  
  43.             list-style: none outside none;  
  44.             margin: 0px 5px;  
  45.             position: relative;  
  46.             top: 1px;  
  47.             height: 24px;   
  48.             /*此处要加上背景颜色,否则ie6下没有边框,(奇怪)有时在ie6下边框会不出现,刚刚又试了了一下居然又不出现问题了*/  
  49.             background-color: #F2F2F2;   
  50.             /*圆角样式,较新版本的浏览器才支持,ff8.0支持,ie只有ie9支持*/  
  51.             border-top-left-radius: 4px;  
  52.             border-top-right-radius: 4px;  
  53.             padding: 0px 5px;  
  54.         }  
  55.         #tabs .tabs_header li a {  
  56.             color: #333;  
  57.         }  
  58.         #tabs .tabs_header li.hover {  
  59.             border: solid 1px #AAAAAA;  
  60.             background-color: #E4E4E4;  
  61.         }  
  62.         #tabs .tabs_header li.active {  
  63.             padding-bottom: 1px;  
  64.             margin-bottom: 0px;  
  65.             border: solid 1px #AAAAAA;  
  66.             background-color: #FFFFFF;  
  67.         }  
  68.           
  69.         #tabs div.tabs_content {  
  70.             border: solid 1px #AAAAAA;  
  71.             padding: 10px;  
  72.             border-top: none;  
  73.             overflow: hidden;  
  74.         }  
  75.     </style>  
  76. </head>  
  77. <body>  
  78.     <div id="tabs">  
  79.         <ul class="tabs_header">  
  80.             <li><a href="###">选项卡一</a></li>  
  81.             <li><a href="###">选项卡二</a></li>  
  82.             <li><a href="###">选项卡三</a></li>  
  83.         </ul>  
  84.         <div class="tabs_content">  
  85.             <p>  
  86.                 这是选项卡一的内容?<br />  
  87.                 这是选项卡一的内容?<br />  
  88.                 这是选项卡一的内容?<br />  
  89.                 这是选项卡一的内容?<br />  
  90.                 这是选项卡一的内容?<br />  
  91.                 这是选项卡一的内容?<br />  
  92.                 这是选项卡一的内容?  
  93.             </p>  
  94.         </div>  
  95.         <div class="tabs_content">  
  96.             <p>  
  97.                 这是选项卡二的内容?<br />  
  98.                 这是选项卡二的内容?<br />  
  99.                 这是选项卡二的内容?<br />  
  100.                 这是选项卡二的内容?<br />  
  101.                 这是选项卡二的内容?<br />  
  102.                 这是选项卡二的内容?<br />  
  103.                 这是选项卡二的内容?  
  104.             </p>  
  105.         </div>  
  106.         <div class="tabs_content">  
  107.             <p>  
  108.                 这是选项卡三的内容?<br />  
  109.                 这是选项卡三的内容?<br />  
  110.                 这是选项卡三的内容?<br />  
  111.                 这是选项卡三的内容?<br />  
  112.                 这是选项卡三的内容?<br />  
  113.                 这是选项卡三的内容?<br />  
  114.                 这是选项卡三的内容?  
  115.             </p>  
  116.         </div>  
  117.     </div>  
  118.     <script type="text/javascript">  
  119.         $(document).ready(function () {  
  120.             $("#tabs").tabs();  
  121.         });  
  122.     </script>  
  123.     <script type="text/javascript">  
  124.           
  125.         (function ($) {  
  126.             $.fn.tabs = function () {  
  127.                 var content = this.find("div");  
  128.                 var list = this.find("ul.tabs_header").find("li");  
  129.                 content.hide();  
  130.                 content.eq(0).show();  
  131.                 list.eq(0).addClass("active");  
  132.                 list.each(function (i) {  
  133.                     $(this).bind({  
  134.                         click: function () {  
  135.                             list.removeClass("active");  
  136.                             content.hide();  
  137.                             content.eq(i).css("display", "");  
  138.                             $(this).addClass("active");  
  139.                         },  
  140.                         mousemove: function () {  
  141.                             $(this).addClass("hover");  
  142.                         },  
  143.                         mouseout: function () {  
  144.                             $(this).removeClass("hover");  
  145.                         }  
  146.                     });  
  147.                 });  
  148.             }  
  149.         })(jQuery);  
  150.           
  151.     </script>  
  152. </body>  
  153. </html>  

经测试在ie6+,ie6+下都能正常使用。兼容还是很好的。

来几张图吧:
简单的jQuery选项卡插件
这是火狐8.0下的效果,圆角边直接用样式来定义

简单的jQuery选项卡插件
这是ie6.0下的效果,没有圆角边。

jquery ui的选项卡ui在ie6.0下是不正常的,呵呵,被我修复了这个问题。

相关推荐

chenyangah / 0评论 2013-06-12