Табы в табе

13 Июля 2018
javascript

Принцип табов очень прост: есть кнопка с атрибутом data-tabs_tab и значением например tab_1, значит есть блок с атрибутом data-tabs_content с таким же значением tab_1.

Внимание! каждое значние атрибута data-tabs_tab и соответственно data-tabs_content должно быть уникальным на странице!

  1. Для работы нам потребуются стили:

    [data-tabs_content]{
    display:none;
}
[data-tabs_content].active{
    display:block;
}

  2. Самая простая архитектура табов:

    <button data-tabs_tab="tab_1" class="active">Таб 1</button>
<button data-tabs_tab="tab_2">Таб 2</button>

<div data-tabs_content="tab_1" class="active">
    Контент 1
</div>
<div data-tabs_content="tab_2">
    Контент 2
</div>

    Или вот например табы в табе:

    <button data-tabs_tab="tab_1" class="active">Таб 1</button>
<button data-tabs_tab="tab_2">Таб 2</button>

<div data-tabs_content="tab_1" class="active">
    Контент 1
    <button data-tabs_tab="tab_3" class="active">Таб 3</button>
    <button data-tabs_tab="tab_4">Таб 4</button>
	
    <div data-tabs_content="tab_3" class="active">Контент 3</div>
    <div data-tabs_content="tab_4">Контент 4</div>
</div>
<div data-tabs_content="tab_2">
    Контент 2
    <button data-tabs_tab="tab_5" class="active">Таб 5</button>
    <button data-tabs_tab="tab_6">Таб 6</button>
    
	<div data-tabs_content="tab_5" class="active">Контент 5</div>
    <div data-tabs_content="tab_6">Контент 6</div>
</div>

  3. Не забудте подключить библиотеку jquery!

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

    Так же добавлен вариант ссылки с якорем, например kakorin.com/#tab_1 сделает активным кнопку и контент со значением атрибута tab_1.

    // функция ищет все элементы на этом же уровне и меняет классы
function tabs(data){
	var el_tab          =$("[data-tabs_tab='"+data+"']");
	var tabs_content    =$("[data-tabs_content='"+data+"']");
	$(el_tab).siblings().removeClass("active");
	$(el_tab).addClass("active");
	$(tabs_content).siblings().removeClass("active");
	$(tabs_content).addClass("active");
};

// ловит нажатие на кнопку с атрибутом data-tabs_tab
$("[data-tabs_tab]").click(function(){
	tabs($(this).attr("data-tabs_tab"));
});

// если есть hash то запускает функцию tabs, передавая ему значение hash
$(document).ready(function(){
	if(window.location.hash){
		tabs(window.location.hash.replace("#",""));
	}
});
Пример