其实像这类选项卡的插件网上也很多，只是个人觉得自己弄一个更好，毕竟自己弄的东西，自己修改起来也轻松。
原理其实也是很简单的，关键在于样式的定义。
原本想直接使用jquery的 ui，无奈懒得理，感觉jquery ui很强大，但是用起来也很麻烦，要引用的样式也多。主要是样式不好修改。
并且我也只想使用选项卡的功能，何必整这么多样式呢。最主要的还是不好修改样式。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <style type="text/css"> a { text-decoration: none; } ul, li, p { list-style-type: none; margin: 0px; padding: 0px; font-size: 12px; } #tabs { width: 600px; border: solid 1px #dddddd; margin: 50px auto; padding: 5px; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } #tabs ul.tabs_header { display: block; position: relative; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid #aaaaaa; background-color: #cccccc; padding: 5px 5px 0px; clear: both; height: 26px; line-height: 26px; } #tabs ul.tabs_header li { border: solid 1px #d3d3d3; border-bottom: 0 none !important; float: left; list-style: none outside none; margin: 0px 5px; position: relative; top: 1px; height: 24px; /*此处要加上背景颜色，否则ie6下没有边框,（奇怪）有时在ie6下边框会不出现，刚刚又试了了一下居然又不出现问题了*/ background-color: #F2F2F2; /*圆角样式，较新版本的浏览器才支持，ff8.0支持，ie只有ie9支持*/ border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 0px 5px; } #tabs .tabs_header li a { color: #333; } #tabs .tabs_header li.hover { border: solid 1px #AAAAAA; background-color: #E4E4E4; } #tabs .tabs_header li.active { padding-bottom: 1px; margin-bottom: 0px; border: solid 1px #AAAAAA; background-color: #FFFFFF; } #tabs div.tabs_content { border: solid 1px #AAAAAA; padding: 10px; border-top: none; overflow: hidden; } </style> </head> <body> <div id="tabs"> <ul class="tabs_header"> <li><a href="###">选项卡一</a></li> <li><a href="###">选项卡二</a></li> <li><a href="###">选项卡三</a></li> </ul> <div class="tabs_content"> <p> 这是选项卡一的内容？<br /> 这是选项卡一的内容？<br /> 这是选项卡一的内容？<br /> 这是选项卡一的内容？<br /> 这是选项卡一的内容？<br /> 这是选项卡一的内容？<br /> 这是选项卡一的内容？ </p> </div> <div class="tabs_content"> <p> 这是选项卡二的内容？<br /> 这是选项卡二的内容？<br /> 这是选项卡二的内容？<br /> 这是选项卡二的内容？<br /> 这是选项卡二的内容？<br /> 这是选项卡二的内容？<br /> 这是选项卡二的内容？ </p> </div> <div class="tabs_content"> <p> 这是选项卡三的内容？<br /> 这是选项卡三的内容？<br /> 这是选项卡三的内容？<br /> 这是选项卡三的内容？<br /> 这是选项卡三的内容？<br /> 这是选项卡三的内容？<br /> 这是选项卡三的内容？ </p> </div> </div> <script type="text/javascript"> $(document).ready(function () { $("#tabs").tabs(); }); </script> <script type="text/javascript"> (function ($) { $.fn.tabs = function () { var content = this.find("div"); var list = this.find("ul.tabs_header").find("li"); content.hide(); content.eq(0).show(); list.eq(0).addClass("active"); list.each(function (i) { $(this).bind({ click: function () { list.removeClass("active"); content.hide(); content.eq(i).css("display", ""); $(this).addClass("active"); }, mousemove: function () { $(this).addClass("hover"); }, mouseout: function () { $(this).removeClass("hover"); } }); }); } })(jQuery); </script> </body> </html> 经测试在ie6+，ie6+下都能正常使用。兼容还是很好的。
来几张图吧：
这是火狐8.0下的效果，圆角边直接用样式来定义
这是ie6.0下的效果，没有圆角边。
jquery ui的选项卡ui在ie6.0下是不正常的，呵呵，被我修复了这个问题。
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
