Табы в табе

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("#",""));
    	} 
    } );
    
Пример