Настройка вложенных вкладок (HTML/CSS)

Question

Прямо сейчас на моей работе мне поручено создать сайт панели мониторинга. Я тщательно просматриваю множество различных вариантов дизайна и того, что хочет моя компания, но все шаблоны, которые я ищу для панелей мониторинга, не отформатированы так, как того хочет компания: вложенная вкладка, а не боковая панель навигации.

Просмотрев кучу вложенных примеров вкладок, один из них привлек мое внимание, которое было Zozoui's Nested Tabs. Это не то, что я видел из BootStrap и пользовательского интерфейса JQuery, поэтому я даже не знаю, как начать с чего-то подобного, но я хотел бы изменить пару вещей здесь и там, как прямо перед второй набор вкладок, имеют описание первого текущего тега.

Итак, как я могу создать свою собственную вкладку, такую ​​как Zozoui's Nested Tabs?

Answer 1

Вы можете создать меню и div для содержимого, когда вы нажмете на определенную вкладку, которую оно должно показать в этом div.do, с помощью jquery или js.

HTML

<nav id="menu"> 
<a id="item1">item1</a> 
<a id="item2">item2</a> 
. 
. 
. 
</nav> 

<div id="contents"> 

<div> 

JQuery

$("#menu a").click(function{ 
    $("contents").html(//something that you want); 

    });