Простые и легкие вкладки на 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
Оригинал статьи можно почитать тут: habrahabr.ru/sandbox/91471/