Londyn
Londyn jest stolicą Anglii.
Jest to najbardziej zaludnione miasto w Wielkiej Brytanii, z metropolii powierzchni ponad 13 milionów mieszkańców.
Paryż
Paryż jest stolicą Francji.
Paris Obszar ten jest jednym z największych skupisk ludności w Europie, z czego ponad 12 milionów mieszkańców.
Tokio
Tokio jest stolicą Japonii.
To centrum Greater Tokyo Area, i najbardziej zaludnionym obszarem metropolitalnym na świecie.
Tabs (Tabulatory)
Zakładki są idealne dla pojedynczych wniosków strony, czy na stronach internetowych umożliwiających wyświetlanie różnych przedmiotów.
Wystarczy utworzyć wiele elementów o tej samej nazwie klasy:
Przykład
<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>
Następnie dodać kilka klikalne przyciski, aby otworzyć zawartość (pojedyncze przyciski, paska nawigacji, sidenav, etc ..):
Przykład
<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>I dodać JavaScript, aby wybrać elementy:
Przykład
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";
}
Spróbuj sam " JavaScript Poradnik
Po pierwsze, należy zadzwonić openCity (), aby otworzyć "London" (id = "London).
Następnie zadzwonić Open City () z inną nazwą miasta (id = "Paris), gdy użytkownik kliknie na jeden z przycisków w menu.
Funkcja openCity () ukrywa wszystkie elementy (display = "none") z nazwą klasy "miasto" i wyświetla element (display = "block") z podanym id miasta.
Aktywny / bieżącą kartę
Jeśli chcesz, aby podświetlić bieżącej karcie / strony użytkownika jest włączona, używać JavaScript i dodać konkretną klasę koloru do aktualnego połączenia kart. W poniższym przykładzie, dodaliśmy klasę "tablink" do każdego łącza. W ten sposób łatwo jest uzyskać wszystkie linki, które jest związane z kartami, a to aktualna łącze TAB klasę "w3-czerwone", aby go zaznaczyć:
Przykład
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";
}
Spróbuj sam " Pionowe Tabs
Przykład
<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>
Spróbuj sam " Animowane Tab Content
Użyj dowolnej klasy W3-animate- zanikać, powiększać lub slajd w treści zakładka:
Przykład
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Spróbuj sam " Galeria zdjęć z zakładkami
× 
× 
× 
× Przykład
<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> Spróbuj sam " Tabs w siatce
Korzystanie z kart w trzecim układzie kolumnowym. Zauważ, że dodamy dolną granicę na aktywnej karcie, zamiast koloru tła: