基于JQuery的Tab小插件

admin · 发表于 2014-8-9 12:28:48

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

您需要登录才可以下载或查看，没有账号？立即注册

x

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

演示效果.jpg

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab 小插件</title>
<style>
.tab{ width:98%;}
.tab_menu ul{ width:98%; list-style:none;}
.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;}
.tab_box{ border:solid #4488BB 1px; padding:4px; height:auto; width:98%; float:left;}
.tab_selected{ background:#4488BB;}
.tab_displayNone{ display:none;}
li{ background:#EEEEEE; list-style:none;}
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="tab_selected">JQuery</li>
<li>ExtJs</li>
<li>Sliverlight</li>
</ul>
</div>
<div class="tab_box">
<div>Hello JQuery!</div>
<div class="tab_displayNone">Hello ExtJs!</div>
<div class="tab_displayNone">Hello Sliverlight!</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
(function($){
$.fn.extend({
//Tab插件名称
XQHTab: function(options) {
//默认值
var defaults = {
tabSelected: "tab_selected",
tabWidth: "100%",
autoHeight: "true"
};
var options = $.extend(defaults, options);
$(this).css("width", options.tabWidth);
//选项卡 this指通过当前选择器获取的JQuery对象
var tab = $(".tab_menu ul li", this);
//选项内容
var tabContent = $(".tab_box > div", this);
if (options.autoHeight != "true") {
tabContent.css("height", options.autoHeight);
}
//单击选项卡
tab.click(function() {
$(this).addClass(options.tabSelected).siblings().removeClass(options.tabSelected);
var curIndex = tab.index(this);
tabContent.eq(curIndex).show().siblings().hide();
});
//return this使JQuery方法可链
return this;
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
$(".tab").XQHTab();
});
</script>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

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

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

相关帖子