London
London adalah ibukota Inggris.
Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.
Paris
Paris adalah ibu kota Prancis.
Wilayah Paris adalah salah satu pusat populasi terbesar di Eropa, dengan lebih dari 12 juta penduduk.
Tokyo
Tokyo adalah ibu kota Jepang.
Ini adalah pusat Greater Tokyo Area, dan daerah metropolitan terpadat di dunia.
Tab (tabulasi)
Tab yang sempurna untuk aplikasi halaman web tunggal, atau untuk halaman web yang mampu menampilkan mata pelajaran yang berbeda.
Hanya membuat banyak elemen dengan nama kelas yang sama:
Contoh
<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>
Kemudian tambahkan beberapa tombol yang dapat diklik untuk membuka konten (tombol tunggal, navigasi bar, sidenav, dll ..):
Contoh
<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>Dan menambahkan JavaScript untuk memilih elemen:
Contoh
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";
}
Cobalah sendiri " JavaScript Dijelaskan
Pertama, sebut openCity () untuk membuka "London" (id = "London).
Kemudian memanggil terbuka City () dengan nama kota yang berbeda (id = "Paris) ketika pengguna mengklik salah satu tombol di menu.
The openCity () fungsi menyembunyikan semua elemen (display = "none") dengan nama kelas "kota", dan menampilkan elemen (display = "block") dengan id kota yang diberikan.
Active / Tab sekarang
Jika Anda ingin menyorot saat tab / halaman pengguna aktif, menggunakan JavaScript dan menambahkan kelas warna tertentu untuk link tab saat ini. Pada contoh di bawah, kita telah menambahkan "tablink" kelas untuk setiap link. Dengan cara itu, sangat mudah untuk mendapatkan semua link yang berhubungan dengan tab, dan memberikan tab link saat sebuah "w3-merah" kelas, untuk menyorotnya:
Contoh
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";
}
Cobalah sendiri " Tab vertikal
Contoh
<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>
Cobalah sendiri " Animasi Tab Content
Gunakan salah satu kelas w3-animate- memudar, zoom atau slide di konten tab:
Contoh
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
Cobalah sendiri " Tab Galeri
× 
× 
× 
× Contoh
<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> Cobalah sendiri " Tab di Grid
Menggunakan tab dalam tata letak kolom ketiga. Perhatikan bahwa kita menambahkan batas bawah ke tab aktif, bukan warna latar belakang: