Как сделать вкладки (табы, tabs) на сайте

Как сделать вкладки (табы, tabs) на сайте? Очень просто, ниже вы найдете подробную инструкцию как правильно сделать табы. За частую они используются в интернет магазинах, когда нужно вывести характеристики, фото, описание в отдельных вкладках. И так, приступим к созданию вкладок:

Демо

Скачать архив

1. В теги head добавляем подключение библиотеки Jquery (если у вас она подключена, пропустите данный пункт):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2. Добавляем CSS код:

.tabs{
display:inline-block;
}
.tabs &gt; 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;
}

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

}

3. HTML код в теги body:

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

<ul>

<li>Первая вкладка</li>

<li>Вторая вкладка</li>

<li>Третья вкладка</li>

</ul>

<div>

<div>Первое содержимое</div>

<div>Второе содержимое</div>

<div>Третье содержимое</div>

</div>

4. В конце (перед закрывающимся тегом body) вставляем javascript код:

<script type="text/javascript">	
$(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);
</script>

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

</script>

Готово, теперь у вас есть простые в установке, использовании табы для сайта.

Как сделать вкладки (табы, tabs) на сайте

Добавить комментарий Отменить ответ