Делаем простые и легкие вкладки (tabs) на jQuery без наворотов

В одном из проектов понадобилось использовать горизонтальные текстовые вкладки, хотел найти что-то готовое, но подключать bootstrap ради такого дела — это извращение нелогично. Попробовал найти простые jQuery плагины для вкладок, однако нашел только множество плагинов с кучей настроек, эффектами анимации и прочим. Было найдено пару вариантов «без выкрутасов», написанных на скорую руку, однако где-то было ограничение по количеству вкладок. В общем, меня ни один вариант не устроил. Как результат, в течении 15 минут родился несложный jQuery плагин, удовлетворяющий моим запросам. Решил поделиться, думаю, кому-нибудь да пригодится.

Количество вкладок не ограничено, так же я попытался сделать структуру максимально простой, так как в моем случае есть необходимость, чтобы заказчик без трудностей с ней разобрался и добавлял новые вкладки.

HTML структура:

<div class="tabs">
    <ul>
        <li>Первая вкладка</li>
        <li>Вторая вкладка</li>
        <li>Третья вкладка</li>
    </ul>
    <div>
        <div>Первое содержимое</div>
        <div>Второе содержимое</div>
        <div>Третье содержимое</div>
    </div>            
</div> 

CSS стили:

.tabs{
	display:inline-block;
}
.tabs > div{
	padding-top:10px;
}
.tabs ul{
	margin:0px;
	padding:0px;
}
.tabs ul:after{
	content:"";
	display:block;
	clear:both;
	height:5px;
	background:#46c765;
}
.tabs ul li{
	margin:0px;
	padding:0px;
	cursor:pointer;
	display:block;
	float:left;
	padding:10px 15px;
	background:#e9eaeb;
	color:#707070;
}
.tabs ul li.active, .tabs ul li.active:hover{
	background:#46c765;
	color:#fff;
}
.tabs ul li:hover{
	background:#d6d6d7;
}

Подключаем плагин:

$(document).ready(function(){
	$(".tabs").lightTabs();
});

Сам код плагина:

(function($){				
	jQuery.fn.lightTabs = function(options){

		var createTabs = function(){
			tabs = this;
			i = 0;
			
			showPage = function(i){
				$(tabs).children("div").children("div").hide();
				$(tabs).children("div").children("div").eq(i).show();
				$(tabs).children("ul").children("li").removeClass("active");
				$(tabs).children("ul").children("li").eq(i).addClass("active");
			}
								
			showPage(0);				
			
			$(tabs).children("ul").children("li").each(function(index, element){
				$(element).attr("data-page", i);
				i++;                        
			});
			
			$(tabs).children("ul").children("li").click(function(){
				showPage(parseInt($(this).attr("data-page")));
			});				
		};		
		return this.each(createTabs);
	};	
})(jQuery);

Демку можно посмотреть тут: jsfiddle.net/du9cbd9j