Tab Navigasi W3.CSS


London

London adalah ibu kota Inggris.

Ini adalah kota terpadat di Britania Raya, dengan wilayah metropolitan lebih dari 9 juta penduduk.


Navigasi Tab

Navigasi tab adalah cara untuk bernavigasi di sekitar situs web.

Biasanya, navigasi tab menggunakan tombol navigasi (tab) yang disusun bersama dengan tab yang dipilih disorot.

Contoh ini menggunakan elemen dengan nama kelas yang sama ("kota" dalam contoh kita), dan mengubah gaya antara display:none dan display:block untuk menyembunyikan dan menampilkan konten yang berbeda:

Contoh

<div id="London" class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div id="Paris" class="city" style="display:none">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="city" style="display:none">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

Dan beberapa tombol yang dapat diklik untuk membuka konten tab:

Contoh

<div class="w3-bar w3-black">
  <button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
  <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>

Dan JavaScript untuk melakukan pekerjaan itu:

Contoh

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";
}

JavaScript Dijelaskan

Fungsi openCity() dipanggil saat pengguna mengklik salah satu tombol di menu.

Fungsi menyembunyikan semua elemen dengan nama kelas "kota" ( display="none" ), dan menampilkan elemen dengan nama kota yang diberikan ( display="block" );



Tab yang Dapat Ditutup

×

London

London adalah ibu kota Inggris.

Untuk menutup tab, tambahkan onclick="this.parentElement.style.display='none'" ke elemen di dalam wadah tab:

Contoh

<div id="London" class="w3-display-container">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-topright">X</span>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
</div>

Tab Aktif/Saat Ini

Untuk menyorot tab/halaman pengguna saat ini, gunakan JavaScript dan tambahkan kelas warna ke tautan aktif. Pada contoh di bawah, kami telah menambahkan kelas "tablink" ke setiap tautan. Dengan begitu, mudah untuk mendapatkan semua tautan yang terkait dengan tab, dan memberi tautan tab saat ini kelas "w3-red", 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";
}

Tab Vertikal

Contoh

<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
  <button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
  <button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>

Konten Tab Animasi

Gunakan salah satu kelas w3-animate- untuk memudarkan, memperbesar atau menggeser konten tab:

Contoh

<div id="London" class="w3-container city w3-animate-left">
  <p>London is the capital city of England.</p>
</div>

Galeri Gambar Bertab

Klik pada gambar:


Alam ×
Alam

Contoh

<a href="#" 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">&times;</span>
  <div class="w3-display-bottomleft w3-container">Nature</div>
</div>

Tab dalam Kotak

Menggunakan tab dalam tata letak kolom ketiga. Perhatikan bahwa kami menambahkan batas bawah ke tab aktif, bukan warna latar belakang:

Contoh