JQuery Табы
В редакторе
JQuery Табы
Brain_Script
817
2019-06-12 09:35:04
<div class="tabs">
<ul>
<li>Первая</li>
<li>Вторая</li>
<li>Третья</li>
</ul>
<div>
<div>Первое содержимое</div>
<div>Второе содержимое</div>
<div>Третье содержимое</div>
</div>
</div>
.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;
}
(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);
$(document).ready(function(){
$(".tabs").lightTabs();
});
Войдите для добавления комментария.