Membuat Konten Tabs dengan CSS dan Javascript

Persiapan:
Aplikasi untuk menulis script html (dalam kasus ini saya menggunakan notepad++).
Browser untuk melihat skrip HTML yang kita buat.

Bagian 1
Langkah:
1. Buat dokumen baru di Notepad++ dan copy-paste script CSS di bawah ini:

body {font-family: Arial;}

.tab {
overflow: hidden;
border: 1px solid #4ec9f4;
background-color: #ccf0fd;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

.tab button:hover {
background-color: #83deff;
}

.tab button.active {
background-color: #4ec9f4;
}

.kontentab {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
border: 1px solid #4ec9f4;
}

@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}

2. Simpan dengan nama style.css.
3. Buat dokumen baru lagi dan ketikkan script di bawah ini:

Membuat Konten Tabs dengan CSS dan Javascript

4. Simpan dengan nama tabs.html
5. dan jika berhasil, maka akan tampak seperi gambar di bawah. saat di klik salah satu tab, konten akan keluar di bawahnya.

Membuat Konten Tabs dengan CSS dan Javascript

christiyoda

Not need to know.

Membuat Konten Tabs dengan CSS dan Javascript

christiyoda

Artikel Terkait