Табы в табе

Принцип табов очень прост: есть кнопка с атрибутом 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("#",""));
    	}
    });
    
Пример