Табы в табе

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