Cara Menambahkan Deep Linking ke Komponen Tab Bootstrap 4

() translation by (you can also view the original English article)

Hari ini kita akan belajar cara menambahkan "deep linking" ke tab Bootstrap 4. Untuk lebih memahami apa yang sedang kita kerjakan, lihat halaman demo dan perhatikan dua hal:

Bagaimana perubahan URL saat Anda mengklik tab.
Dengan memberikan masing-masing tab URL-nya sendiri, konten menjadi dapat dibagikan. Jika Anda mengambil URL tab dan membukanya di browser/jendela lain, tab yang sesuai akan terlihat.

Perhatikan bahwa URL mencerminkan tab yang dipilih

Kami akan menguraikan tiga langkah utama; HTML, CSS, dan JavaScript. Tingkat kompetensi tertentu untuk ketiga hal ini diasumsikan. Gembira untuk melihat bagaimana kita akan membangun ini? Jika jawabannya ya, mari kita mulai!

1. Membangun Tab

Kita akan memulai dengan template awal yang diambil dari dokumentasi Bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- custom CSS -->
    <link rel="stylesheet" href="css/main.css">
    <title>How to Add Deep Linking to the Bootstrap 4 Tabs Component</title>
  </head>
  <body>
    <!-- content here -->
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- custom JS -->
    <script src="js/main.js"></script>
  </body>
</html>

Untuk membuat tab, kita akan memanfaatkan kode contoh untuk komponen tab yang disediakan Bootstrap:

<ul class="nav nav-mytabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab" aria-controls="history" aria-selected="false">History</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="city-attractions-tab" data-toggle="tab" href="#city-attractions" role="tab" aria-controls="city-attractions" aria-selected="false">City Attractions</a>
  </li>
</ul>
<div class="tab-content mytab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <!-- content here -->
  </div>
  <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
    <!-- content here -->
  </div>
  <div class="tab-pane fade" id="city-attractions" role="tabpanel" aria-labelledby="city-attractions-tab">
    <!-- content here -->
  </div>
</div>

2. CSS

Selanjutnya kita menetapkan beberapa aturan CSS untuk komponen kita. Tidak ada yang terlalu mewah, hanya beberapa gaya dasar. Perlu disebutkan bahwa dalam tutorial sebelumnya, kita menggunakan gaya serupa untuk membuat komponen tab khusus.

Berikut ini style awalnya:

.nav-mytabs {
  margin-top: 2rem;
}

.nav-mytabs li:not(:last-child) {
  margin-right: 7px;
}

.nav-mytabs a {
  position: relative;
  top: 4px;
  padding: 10px 25px;
  border-radius: 2px 2px 0 0;
  background: white;
  color: black;
  opacity: 0.7;
  transition: all 0.1s ease-in-out;
}

.nav-mytabs a.active, 
.nav-mytabs a:hover {
  opacity: 1;
  top: 0;
}

.mytab-content {
  position: relative;
  z-index: 2;
  padding: 25px;
  border-radius: 0 4px 4px 4px;
  background: white;
}

3. JavaScript

Dengan HTML dan CSS di tempatnya, sekarang saatnya untuk melihat kode JavaScript yang diperlukan (ini adalah bagian penting).

Pertama, ketika DOM sudah siap, kita mengambil URL halaman dan menggunakan regular expression untuk menghapus garis miringnya. Misalnya, jika URL asli adalah something/, URL yang dimodifikasi akan menjadi something.

Selanjutnya, kita periksa untuk melihat apakah URL mengandung hash. Jika itu kasusnya, itu berarti kita ingin menampilkan isi dari tab kedua atau ketiga (dalam contoh kita). Untuk melakukannya, kita melakukan hal berikut:

Ambil nama tab target dan aktifkan dengan menggunakan metode tab Bootstrap.
Gunakan reguler expression untuk menghasilkan format URL yang diinginkan.
Update URL halaman tanpa memaksa pemuatan ulang halaman dengan memanfaatkan metode replaceState.
Secara opsional, memaksa halaman scroll untuk memulai dari bagian atas halaman.

Setiap kali kita mengeklik tab, kita melakukan hal berikut:

Ambil nilai atribut href dari tab ini. Dalam kasus kita, nilai yang mungkin adalah #home, #history, #city-attractions.
Periksa nilai atribut dan, bergantung pada itu, buat format URL yang diinginkan.
Perbarui URL halaman tanpa memaksa pemuatan ulang halaman dengan memanfaatkan metode replaceState.

Inilah JavaScript yang menangani semua itu:

$(document).ready(() => {
  let url = location.href.replace(/\/$/, "");

  if (location.hash) {
    const hash = url.split("#");
    $('#myTab a[href="#'+hash[1]+'"]').tab("show");
    url = location.href.replace(/\/#/, "#");
    history.replaceState(null, null, url);
    setTimeout(() => {
      $(window).scrollTop(0);
    }, 400);
  } 
  
  $('a[data-toggle="tab"]').on("click", function() {
    let newUrl;
    const hash = $(this).attr("href");
    if(hash == "#home") {
      newUrl = url.split("#")[0];
    } else {
      newUrl = url.split("#")[0] + hash;
    }
    newUrl += "/";
    history.replaceState(null, null, newUrl);
  });
});

4. Dukungan Browser

Demo harus berfungsi dengan baik di semua browser terbaru. Untuk mempermudah, saya belum menggunakan kompiler JavaScript (misalnya Babel), tetapi dalam kode Anda sendiri, Anda mungkin harus melakukannya.

Kesimpulan

Dalam tutorial ini, kami berhasil menyesuaikan perilaku tab Bootstrap 4, dengan memberi setiap tab URL yang dapat diidentifikasi, membuat konten mereka lebih dapat dinavigasi dan dibagikan. Perlu diingat bahwa proses yang diterapkan di sini juga dapat diterapkan ke kerangka kerja lainnya atau bahkan komponen tab khusus.

Jika ada hal-hal yang tidak Anda pahami, atau apa pun yang tampaknya tidak jelas bagi Anda, beri tahu saya di komentar di bawah ini!