简单的jQuery选项卡插件

qiuhaotc

2012-02-19

关注关注

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

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

原本想直接使用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>