Tab
Acrescentar um data-tab="group" no elemento pai, um data-tab="nav" na navegação, um data-tab="item" em cada item da navegação, um data-tab="link" com um atributo href="#nome-do-id" em cada link, associando a um elemento target com um id.
O elemento target, deve possuir um data-tab="content" e um id com o mesmo nome do href="#nome-do-id" dos links de cada tab. As classes podem ter qualquer nome e serem estilizadas livremente.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias ab odit laudantium iure dolor tempore corrupti illo reprehenderit ex. Assumenda minima odio itaque optio, ducimus ipsam et a labore nostrum.Nam, vitae voluptatibus cum ex, dolore adipisci accusantium minus nihil incidunt eius deserunt quam alias culpa ipsam quae quidem minima quia at magnam? Distinctio libero, et illo perferendis autem eum.
HTML Exemplo
<div class="tab" data-tab="group">
<nav class="tab-nav" data-tab="nav">
<ul>
<li class="active" data-tab="item">
<a href="#tab-one" data-tab="link">Tab One</a>
</li>
<li data-tab="item">
<a href="#tab-two" data-tab="link">Tab Two</a>
</li>
<li data-tab="item">
<a href="#tab-three" data-tab="link">Tab Three</a>
</li>
</ul>
</nav>
<section class="tab-content active" id="tab-one" data-tab="content">
<p> Section One</p>
</section>
<section class="tab-content" id="tab-two" data-tab="content">
<p> Section Two</p>
</section>
<section class="tab-content" id="tab-three" data-tab="content">
<p> Section Three</p>
</section>
</div>