Вкладки (tabs) на jQuery без наворотов

Количество вкладок не ограничено.
HTML структура:

  • Первая вкладка
  • Вторая вкладка
  • Третья вкладка
Первое содержимое
Второе содержимое
Третье содержимое


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);

Share this post:

Recent Posts

Leave a Comment