简单的jQuery选项卡插件

其实像这类选项卡的插件网上也很多，只是个人觉得自己弄一个更好，毕竟自己弄的东西，自己修改起来也轻松。原理其实也是很简单的，关键在于样式的定义。原本想直接使用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下是不正常的，呵呵，被我修复了这个问题。