Герб Укріїни
Віримо в Україну та ЗСУ. Слава Україні!

Как сделать адаптивные вкладки (табы) на сайте с нумерацией

Вариант табов №1 – адаптивные табы с нумерацией

Веб-страницы часто содержат множество информации, которые могут быть организованы в разные категории и разбиты на различные вкладки для более удобной навигации. В этой статье мы расскажем, как установить табы на свой сайт с помощью jQuery.Данные табы имеют функционал подсчета и добавляют клас предыдущему перед активным табом вкладке. Ето сделано для того, что бы отключать разделители. Можно использовать и для других целей.

See the Pen Адаптивные вкладки (табы) на сайте с нумерацией by Tom Johnson (@OwlThemes) on CodePen.

Демо

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

Шаг 1: Подключите библиотеку jQuery к вашему сайту Перед использованием табов на вашем сайте, убедитесь, что библиотека jQuery подключена к вашей странице. Для этого, добавьте следующий код в секцию head вашего HTML-документа:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Шаг 2. Добавляем CSS код:
.tabs .tabs_content {padding:30px;background: #FFFFFF;border-radius: 0px 30px 30px 30px;min-height: 300px;width: 100%;box-shadow: 0px 4px 40px rgba(0, 43, 60, 0.04);z-index: 1;position: relative;}
.tabs ul{margin:0px;padding:0px;display: inline-flex;background: #F2F4F4;border-radius: 20px 20px 0 0;/* box-shadow: 0px 4px 40px rgba(0, 43, 60, 0.04); */z-index: 2;/* font-variant: proportional-nums; */position: relative;}
.tabs ul li:before {content: "";position: absolute;top: 19px;right: 0;width: 1px;height: 24px;background-color: #d5d5d5;}
.tabs ul li:last-child:before { content: ''; display: none;}
.tabs ul .prev:before {display: none;}
.tabs ul li{position: relative;display: block;padding: 18px 23px;background: #f4f4f4;border-radius: 30px 30px 0 0;text-align: center;color: #AAABAB;font-size: 17px;border: 0;}
.tabs ul li.active:before { content: ''; display: none;}
.tabs ul li.active, .tabs ul li.active:hover{background-color: #fff;  color: #191919;}
.tabs ul li:hover{ color: #191919;cursor: pointer;}
Шаг 3. После подключения стилей, следующий шаг – добавление HTML-разметки на страницу, где будут размещены табы
<div class="tabs">
    <ul>
        <li>Первая вкладка</li>
        <li>Вторая вкладка</li>
        <li>Третья вкладка</li>
    </ul>
    <div>
        <div>Первое содержимое</div>
        <div>Второе содержимое</div>
        <div>Третье содержимое</div>
    </div>            
</div> 
Шаг 4. Последний шаг – инициализация плагина на странице
<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>
Готово, теперь у вас есть простые в установке, использовании табы для сайта.

Вариант табов №2

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

Демо

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

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

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

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

<div class="tabs">
    <ul>
        <li>Первая вкладка</li>
        <li>Вторая вкладка</li>
        <li>Третья вкладка</li>
    </ul>
    <div>
        <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>

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

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *