Bagaimana Cara Membuat Tab dengan CSS dan JavaScript?

HTML “ tab ” adalah blok yang menyimpan konten situs web dalam beberapa bagian. Ini digunakan untuk menampilkan konten yang disimpan menggunakan berbagai pendekatan seperti klik mouse, klik dua kali, arahkan kursor, dan banyak lagi. Tab menyediakan cara paling sederhana untuk menavigasi berbagai halaman web di sebuah situs web. Selain itu, mereka juga membantu mengatur ruang dan membuat website lebih menarik dan eye-catching.

Panduan ini akan menjelaskan cara membuat tab dengan CSS dan JavaScript.

Bagaimana Cara Membuat Tab Dengan CSS dan JavaScript?

Bagian ini memberikan petunjuk langkah demi langkah untuk membuat tab dengan CSS dan JavaScript.

Langkah 1: Buat Struktur Tab Menggunakan HTML

Pertama, lihat kode HTML yang membuat struktur tab HTML:

< id div = 'tab1' klik = 'Pertama()' > Rumah div >

< id div = 'tab2' klik = 'Kedua();' > Tentang div >

< id div = 'tab3' klik = 'ketiga();' > Hubungi kami div >

< saudara />

< id div = 'lanjutan1' > Selamat datang di Linuxhint ! div >

< id div = 'lanjutan2' > TEKNOLOGI PENDIDIKAN

Kami telah membuat banyak produk untuk membantu Anda belajar tentang Linux, Pemrograman, Ilmu Komputer, dan banyak lagi.

div >

< id div = 'lanjutan3' >

Anda dapat menghubungi tim kami di editor AT linuxhint DOT com.

div >

Pada baris kode di atas:

“
” tag menambahkan elemen div dengan id “tab1” dan lampiran “ klik ” acara untuk mengeksekusi yang tertaut “ Pertama() ” berfungsi saat diklik. Elemen ini bertindak sebagai tab HTML.
Metode di atas dilakukan untuk dua elemen div berikutnya.
“
” tag menambahkan jeda baris.
“
” tag sekali lagi menyisipkan elemen div yang memiliki id yang ditetapkan “lanjutan1”. Elemen ini menunjukkan konten tab yang dibuat dalam satu blok.
Dua berikutnya “
” Tag juga menambahkan elemen div dengan id yang ditetapkan.

Langkah 2: Tab Gaya Menggunakan CSS

Sekarang, terapkan properti penataan CSS untuk menyesuaikan tab dan kontennya sesuai pilihan Anda:

< gaya >

#tab1, #tab2, #tab3 {

mengambang : kiri ;

lapisan : 5px 10px 5px 10px ;

latar belakang : berwarna oranye ;

warna : #FFFFFF ;

batas : 0px 5px 0px 5px ;

kursor : penunjuk ;

berbatasan - radius : 3 piksel ;

}

#tab1 : arahkan kursor, #tab2 : arahkan kursor, #tab3 : melayang {

latar belakang : hijau ;

}

#lanjutan1, #lanjutan2, #lanjutan3 {

lebar : 300 piksel ;

tinggi : 100 piksel ;

lapisan : 40 piksel ;

font - ukuran : sedang ;

font - keluarga : 'Times Romawi Baru' , Kali, serif ;

berbatasan : 2px jeruk padat ;

berbatasan - radius : 7 piksel ;

menampilkan : tidak ada ;

}

gaya >

Dalam cuplikan kode yang disebutkan:

Pertama, akses “ tab ” menggunakan id yang ditetapkan dan menyesuaikannya melalui properti gaya berikut (float, padding, latar belakang, warna, margin: 0px 5px 0px 5px, kursor, dan radius batas).
Selanjutnya, lampirkan “ melayang ” event handler dengan tab untuk mengubah warna latar belakangnya saat mouse pengguna mengarahkan mouse ke atasnya.
Setelah itu, akses “ konten tab ” disimpan dalam elemen div yang idnya adalah “cont1”, “cont2”, dan “cont3”. Sekarang, terapkan properti gaya berikut (lebar, tinggi, padding, ukuran font, jenis font, batas, radius batas, dan tampilan) pada properti tersebut.

Langkah 3: Tambahkan Fungsi ke Tab Menggunakan JavaScript

Terakhir, tambahkan fungsionalitas ke tab yang dibuat dengan bantuan JavaScript:

< naskah >

berfungsi terlebih dahulu ( ) {

dokumen. dapatkanElementById ( 'lanjutan1' ) . gaya . menampilkan = 'memblokir' ;

dokumen. dapatkanElementById ( 'lanjutan2' ) . gaya . menampilkan = 'tidak ada' ;

dokumen. dapatkanElementById ( 'lanjutan3' ) . gaya . menampilkan = 'tidak ada' ;

}

fungsi kedua ( ) {

dokumen. dapatkanElementById ( 'lanjutan2' ) . gaya . menampilkan = 'memblokir' ;

dokumen. dapatkanElementById ( 'lanjutan1' ) . gaya . menampilkan = 'tidak ada' ;

dokumen. dapatkanElementById ( 'lanjutan3' ) . gaya . menampilkan = 'tidak ada' ;

}

fungsi ketiga ( ) {

dokumen. dapatkanElementById ( 'lanjutan3' ) . gaya . menampilkan = 'memblokir' ;

dokumen. dapatkanElementById ( 'lanjutan1' ) . gaya . menampilkan = 'tidak ada' ;

dokumen. dapatkanElementById ( 'lanjutan2' ) . gaya . menampilkan = 'tidak ada'

}

naskah >

Baris kode di atas:

Tentukan fungsi bernama “ Pertama ”.
Dalam definisi fungsi ini, “ dokumen.getElementById() ” Metode mengakses elemen div yang idnya adalah “cont1” dan menerapkan “ gaya ” properti dengan “ memblokir ” nilai di atasnya. Properti ini akan menampilkan konten tab yang diklik pengguna.
Selanjutnya, “document.getElementById()” mengakses div lain dan menerapkan properti “style” yang memiliki nilai “none” untuk menyembunyikannya. Ini akan menyembunyikan elemen itu di halaman web.
Metode di atas dilakukan untuk elemen div yang diakses selanjutnya. Ini karena fungsi “pertama” hanya menampilkan konten tab yang nilai properti “gaya”-nya adalah “blok” dan menyembunyikan yang lainnya.
Prosedur di atas dilakukan untuk fungsi “kedua()” dan “ketiga()” berikutnya.

Keluaran

Terlihat bahwa tab berhasil dibuat dan menampilkan kontennya masing-masing pada klik pengguna.

Kesimpulan

Untuk membuat tab, pertama-tama buat strukturnya menggunakan “HTML”, lalu sesuaikan dengan bantuan properti gaya CSS. Properti gaya ditambahkan tanpa mengekspor lembar gaya tambahan apa pun. Properti ini menjadikan tab menarik dan menarik perhatian. Setelah tab dibuat dan disesuaikan, gunakan bahasa pemrograman JavaScript untuk menambahkan fungsionalitas ke dalamnya. Panduan ini secara praktis telah menjelaskan prosedur lengkap membuat tab dengan CSS dan JavaScript.

Bagaimana Cara Membuat Tab dengan CSS dan JavaScript?