JQ插件里面的代码
;(function ($) {
$.fn.tab = function (options) {
var defaults = {
//各种参数,各种属性
currentClass: 'current',
tabNav: '.tab_nav>li',
tabContent: '.tab_content>div',
eventType: 'click',
};
//这个是利用extend方法把 defaults对象的方法属性全部整合到 options里,也就是options继承了defaults对象的方法以及属性。这个defaults和options名字是可以随意更改的,只要是满足js的命名规范
下面操作功能的时候不用把变量写死
var options = $.extend(defaults, options);
this.each(function () {
//各种功能代码
var _this = $(this);
_this.find(options.tabNav).on(options.eventType, function () {
$(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);
var index = $(this).index();
_this.find(options.tabContent).eq(index).show().siblings().hide();
});
});
return this;
}
})(jQuery);
html代码使用
<div class="tab">
<ul class="tab_nav">
<li class="current">html</li>
<li>css</li>
<li>js</li>
</ul>
<div class="tab_content">
<div style="display:block;">html</div>
<div>css</div>
<div>js</div>
</div>
</div>
<script>
$(function(){
$('.tab').tab();
});
</script>