tab选项卡插件

　　注册账号好长时间了，总是感觉无从下笔，所以一直耽搁了，也许是眼高手低吧，总是幻想着尽善尽美。转眼2017已经过去半年了，在这个闷热的周末午后，痛定思痛，终于意识到必须要改变自己的执行力。万事开头难，那就从最简单的开始吧。
　　决定写博客并不是单纯为了什么，只是想总结一些经验教训，顺便提高自己的表达能力，希望自己能在这条路上站的更高，走的更远一些。好了，言归正传，以下只是一个简单的tab切换插件，大神请绕行。

　　效果图如下所示：

html布局及css样式：

<style type="text/css">
*{
	margin: 0;
	padding: 0;
	list-style: none;
}
#tab{
	margin: 50px;
}
.tab_header{
	width: 300px;
	height: 40px;
}
.tab_header ul li{
	float: left;
	text-align: center;
	background-color: #f1f1f1;
	padding: 4px 10px;
	border-left: 1px solid #0ff;
	cursor: pointer;
}
.tab_header ul li:nth-child(1){
	border-left: 0;
}
.tab_header ul li.active{
	background-color: #0ff;
}
.tab_content{
	width: 300px;
	height: 200px;
	border: 1px solid #999;
}
.tab_content .tab_content_item{
	display: none;
}
.tab_content .active{
	display: block;
}
</style>

<div id="tab">
    <div class="tab_header">
        <ul>
            <li class="active">选项卡一</li>
            <li>选项卡二</li>
            <li>选项卡三</li>
        </ul>
    </div>
    <div class="tab_content">
        <div class="tab_content_item active">
            我是第一个内容
        </div>
        <div class="tab_content_item">
            我是第二个内容
        </div>
        <div class="tab_content_item">
            我是第三个内容
        </div>
    </div>
</div>

//调用方法
<script type="text/javascript">
　　//1.直接调用
    $("#tab").tab();
    
   //2.改变配置，把默认的click改为mouseover或其他
   /*$("#tab").tab({
        trigger_event_type:'mouseover'
    });*/
</script>

 下面是插件内容：

;(function($) { 

    $.fn.tab = function(options) {
        // 将defaults 和 options 参数合并到{}
        var opts = $.extend({},$.fn.tab.defaults,options);

        return this.each(function() {
            var obj = $(this);

            $(obj).find('.tab_header li').on(opts.trigger_event_type, function (){
                $(obj).find('.tab_header li').removeClass('active');
                $(this).addClass('active');

                $(obj).find('.tab_content div').hide();
                $(obj).find('.tab_content div').eq($(this).index()).show();

                opts.change($(this).index());
            });      
        });
        // each end
    }

    //定义默认
    $.fn.tab.defaults = {
        trigger_event_type:'click', //mouseover | click 默认是click
        change: function(index){
            //console.log('current index = ' + index);
        }
    };

})(jQuery);

 　　我之前想的是给这些li按钮添加按顺序排列的自定义属性data-key，然后在和内容div一一对应。既然$(this).index()能直接取到，那就不用多此一举了。

var len = $('.tab_header li').length;
for(var i=0;i<len;i++){
	$('.tab_header li').eq(i).attr('data-key',i);
}

$('.tab_header li').on('click',function(){
	var index = $(this).data('key');
	$('.tab_content .tan_content_item').hide().eq(index).show();
});

 　　好了，一个完整的插件就完成了。