document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Membuat Tab Gudang Coding</title>
  5. </head>
  6. <style>
  7.     /* Style the tab */
  8. .tab {
  9.   overflow: hidden;
  10.   border: 1px solid #ccc;
  11.   background-color: #33FFF2;
  12. }
  13.  
  14. /* Style tombol yang digunakan untuk membuka konten tab */
  15. .tab button {
  16.   background-color: inherit;
  17.   float: left;
  18.   border: none;
  19.   outline: none;
  20.   cursor: pointer;
  21.   padding: 14px 16px;
  22.   transition: 0.3s;
  23. }
  24.  
  25. /* Ubah warna latar belakang tombol saat mengarahkan kursor */
  26. .tab button:hover {
  27.   background-color: #43FF33;
  28. }
  29.  
  30. /* Buat kelas tablink aktif / saat ini */
  31. .tab button.active {
  32.   background-color: #FF3333;
  33. }
  34.  
  35. /* Style the tab content */
  36. .tabcontent {
  37.   display: none;
  38.   padding: 6px 12px;
  39.   border: 1px solid #ccc;
  40.   border-top: none;
  41. }
  42. .tabcontent {
  43.   animation: fadeEffect 1s; /* Fading effect takes 1 second */
  44. }
  45.  
  46. /* Go from zero to full opacity */
  47. @keyframes fadeEffect {
  48.   from {opacity: 0;}
  49.   to {opacity: 1;}
  50. }
  51. /* Style the close button */
  52. .topright {
  53.   float: right;
  54.   cursor: pointer;
  55.   font-size: 28px;
  56. }
  57. </style>
  58.  
  59. <body>
  60.     <!-- Tab links -->
  61. <div class="tab">
  62.   <button class="tablinks" onclick="openCity(event, \'Surabaya\')">Surabaya</button>
  63.   <button class="tablinks" onclick="openCity(event, \'Jakarta\')">Jakarta</button>
  64.   <button class="tablinks" onclick="openCity(event, \'Bali\')">Bali</button>
  65. </div>
  66.  
  67. <!-- Tab content -->
  68. <div id="Surabaya" class="tabcontent">
  69.   <span onclick="this.parentElement.style.display=\'none\'" class="topright">&times</span>
  70.  <h3>Surabaya</h3>
  71.  <p>Kota Surabaya adalah ibu kota Provinsi Jawa Timur, Indonesia,</p>
  72. </div>
  73.  
  74. <div id="Jakarta" class="tabcontent">
  75.  <h3>Jakarta</h3>
  76.  <p>Daerah Khusus Ibukota Jakarta adalah ibu kota negara dan kota terbesar di Indonesia</p>
  77. </div>
  78.  
  79. <div id="Bali" class="tabcontent">
  80.  <h3>BALI</h3>
  81.  <p>Bali adalah sebuah pulau di Indonesia yang dikenal karena memiliki terumbu karang yang cantik.</p>
  82. </div>
  83. <script>
  84.     function openCity(evt, cityName) {
  85.  // Declare all variables
  86.  var i, tabcontent, tablinks;
  87.  
  88.   // Get all elements with class="tabcontent" and hide them
  89.   tabcontent = document.getElementsByClassName("tabcontent");
  90.   for (i = 0; i < tabcontent.length; i++) {
  91.    tabcontent[i].style.display = "none";
  92.  }
  93.  
  94.  // Get all elements with class="tablinks" and remove the class "active"
  95.  tablinks = document.getElementsByClassName("tablinks");
  96.  for (i = 0; i < tablinks.length; i++) {
  97.    tablinks[i].className = tablinks[i].className.replace(" active", "");
  98.  }
  99.  
  100.  // Show the current tab, and add an "active" class to the button that opened the tab
  101.  document.getElementById(cityName).style.display = "block";
  102.  evt.currentTarget.className += " active";
  103. }
  104.  
  105. </script>
  106. </body>
  107. </html>
');