Часто возникает неоибходимость в использовании простых текстовых вкладок, a подключать bootstrap ради такого дела — это нелогично.
Преимущества плагина:
- Количество вкладок не ограничено;
- Максимально простая структура.
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);