Londres
Londres é a cidade capital da Inglaterra.
É a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 13 milhões de habitantes.
Paris
Paris é a capital da França.
A área de Paris é um dos maiores centros populacionais na Europa, com mais de 12 milhões de habitantes.
Tóquio
Tóquio é a capital do Japão.
Ele é o centro da área maior de Tokyo, e a mais populosa região metropolitana do mundo.
Tabs (Tabulações)
Tabs são perfeitos para aplicações única página da web, ou para páginas Web capaz de exibir diferentes assuntos.
Basta criar muitos elementos com o mesmo nome da classe:
Exemplo
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
city of England.</p>
</div>
<div id="Paris" class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
Em seguida, adicione alguns botões clicáveis para abrir o conteúdo (botões individuais, barra de navegação, sidenav, etc ..):
Exemplo
<ul class="w3-navbar">
<li><a href="#" onclick="openCity('London')">London</a></li>
<li><a href="#" onclick="openCity('Paris')">Paris</a></li>
<li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>E adicionar um JavaScript para selecionar os elementos:
Exemplo
openCity("London");
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
Tente você mesmo " JavaScript Explicado
Em primeiro lugar, chamar OpenCity () para abrir "London" (id = "London).
Em seguida, chamar aberto da cidade () com um nome de cidade diferente (id = "Paris) quando o usuário clica em um dos botões do menu.
A função OpenCity () oculta todos os elementos (display = "none") com o nome da classe "da cidade", e exibe o elemento (display = "block") com o ID da cidade.
/ Tab atual ativa
Se você quiser destacar o actual separador / página que o usuário está ligado, utilize JavaScript e adicionar uma classe cor específica para o link guia atual. No exemplo abaixo, nós adicionamos uma classe "tablink" para cada link. Dessa forma, é fácil de obter todos os links que está associado com abas, e dar o link aba atual uma classe "w3-vermelho", para destacá-lo:
Exemplo
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i =
0; i < x.length; i++) {
x[i].style.display
= "none";
}
tablinks =
document.getElementsByClassName("tablink");
for (i =
0; i < x.length; i++) {
tablinks[i].className =
tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display =
"block";
evt.currentTarget.className += "
w3-red";
}
Tente você mesmo " Tabs verticais
Exemplo
<nav class="w3-sidenav w3-light-grey" style="width:130px">
<a href="#" class="tablink" onclick="openCity(event, 'London')">London</a>
<a href="#" class="tablink" onclick="openCity(event, 'Paris')">Paris</a>
<a href="#" class="tablink" onclick="openCity(event, 'Tokyo')">Tokyo</a>
</nav>
Tente você mesmo " Tab Animated conteúdo
Use qualquer uma das classes w3-animate- a desvanecer-se, zoom ou slide no conteúdo guia:
Exemplo
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Tente você mesmo " Galeria de Imagens com guias
× 
× 
× 
× Exemplo
<a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img
src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'"
class="w3-display-topright">×</span>
<div
class="w3-display-bottomleft w3-container">Nature</div>
</div> Tente você mesmo " Tabs em uma grade
Usando separadores em um layout terceira coluna. Note que nós adicionamos uma borda inferior para a aba ativa, em vez de uma cor de fundo: