Hallo Sahabat Dumetschool bertemu lagi nih bersama saya. Bagaimana kabar sahabat semua ?? semoga selalu sehat dan tetap semangat yaa. Baiklah dalam kesempatan kali ini saya akan memberikan sedikit tutorial tentang cara membuat tabs dengan javascript. Sebenarnya apasih tabs itu dalam website ,makanya jangan kemana-mana yooo ikut deh langkah-langkahnya.Baiklah tabs itu sendiri biasanya seperti navigasi menu yang memuat halaman sesuai judul yang dipilih, jadi akan terlihat tab yang aktif. Oke mari dimulai saja cara membuat struktur untuk membuat contentnya seperti berikut:

Sahabat bisa perhatikan ada tag button yang nanti berfungsi sebagai menu tab dan ada sebuah fungsi javascript onclick jadi saat di click akan menjalankan perintah javscript-nya sesuai index yang dipilih.

setelah membuat struktur HTML selanjutnya berikan style CSS agar terlihat menarik tampilannya ketikkan code dibawah ini:

Penjelasannya :
Jadi saat kondisi pertama keempat tab dalam posisi tidak aktif dimana terdapat style=”display: none”. Kemudian pada saat halaman web dimuat sesuai yang di click atau pilih maka tab diaktifkan dengan menampilkan isinya, apabila sudah ditambahkan kode dari javascript seperti berikut ini:

Jika sudah simpan semua file yang sudah diketikkan lalu coba jalankan pada browser masing-masing ,hasil tampilnnya seperti dibawah ini:

1-Membuat Menu Tabs Dengan Javascript

tampilan dibawah ini saat dipilih salah satu tab menunya:

2-Membuat Menu Tabs Dengan Javascript

Demikian yang bisa saya sampaikan dalam tutorial kali ini semoga bermanfaat , jangan lupa untuk mencoba dan sampai jumpa pada kesempatan lainnya.

terima kasih.