Bagaimana untuk Membuat Tab dengan CSS dan JavaScript?

HTML “ tab ” ialah blok yang menyimpan kandungan laman web dalam ketulan. Ini digunakan untuk memaparkan kandungan yang disimpan menggunakan pelbagai pendekatan seperti klik tetikus, klik dua kali, tuding dan banyak lagi. Tab menyediakan cara paling mudah untuk menavigasi melalui halaman web yang berbeza bagi tapak web. Selain itu, mereka juga membantu mengurus ruang dan menjadikan laman web lebih menarik dan menarik perhatian.

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

Bagaimana untuk Membuat Tab Dengan CSS dan JavaScript?

Bahagian ini menjalankan arahan langkah demi langkah untuk penciptaan tab dengan CSS dan JavaScript.

Langkah 1: Cipta Struktur Tab Menggunakan HTML

Pertama, lihat kod HTML yang mencipta struktur tab HTML:

< id div = 'tab1' onclick = 'pertama()' > Rumah div >

< id div = 'tab2' onclick = 'kedua();' > Tentang div >

< id div = 'tab3' onclick = 'ketiga();' > Hubungi Kami div >

< br />

< id div = 'samb1' > Selamat datang ke Linuxhint ! div >

< id div = 'sambung2' > PENDIDIKAN TEKNOLOGI

Kami telah membina banyak produk untuk membantu anda mempelajari tentang Linux, Pengaturcaraan, Sains Komputer dan banyak lagi.

div >

< id div = 'samb3' >

Anda boleh menghubungi pasukan kami di editor AT linuxhint DOT com.

div >

Dalam baris kod di atas:

'
teg ” menambah elemen div dengan id “tab1” dan dilampirkan “ onclick ' acara untuk melaksanakan yang dipautkan ' pertama () ” fungsi apabila ia diklik. Elemen ini bertindak sebagai tab HTML.
Kaedah di atas dilakukan untuk dua elemen div seterusnya.
'
teg ” menambah pemisah baris.
'
tag ” sekali lagi memasukkan elemen div yang mempunyai id yang ditetapkan “cont1”. Elemen ini menunjukkan kandungan tab yang dibuat dalam blok.
Dua seterusnya '
tag ” juga menambah elemen div dengan id yang diperuntukkan.

Langkah 2: Gaya Tab Menggunakan CSS

Sekarang, gunakan sifat penggayaan CSS untuk menyesuaikan tab dan kandungannya mengikut pilihan anda:

< gaya >

#tab1, #tab2, #tab3 {

terapung : dibiarkan ;

padding : 5px 10px 5px 10px ;

latar belakang : berwarna oren ;

warna : #FFFFFF ;

margin : 0px 5px 0px 5px ;

kursor : penunjuk ;

sempadan - jejari : 3px ;

}

#tab1 : tuding, #tab2 : tuding, #tab3 : berlegar {

latar belakang : hijau ;

}

#cont1, #cont2, #cont3 {

lebar : 300px ;

ketinggian : 100px ;

padding : 40px ;

fon - saiz : sederhana ;

fon - keluarga : 'Times New Roman' , Times, serif ;

sempadan : 2px oren pepejal ;

sempadan - jejari : 7px ;

paparan : tiada ;

}

gaya >

Dalam coretan kod yang dinyatakan:

Pertama, akses ' tab ” menggunakan id yang diperuntukkan dan sesuaikan mereka melalui sifat gaya berikut (float, padding, latar belakang, warna, jidar: 0px 5px 0px 5px, kursor dan jejari sempadan).
Seterusnya, lampirkan ' berlegar ” pengendali acara dengan tab untuk menukar warna latar belakangnya apabila tetikus pengguna melayang di atasnya.
Selepas itu, akses ' kandungan tab ” disimpan dalam elemen div yang idnya ialah “cont1”, “cont2”, dan “cont3”. Sekarang, gunakan sifat gaya berikut (lebar, tinggi, pelapik, saiz fon, keluarga fon, jidar, jejari jidar dan paparan) padanya.

Langkah 3: Tambahkan Fungsi pada Tab Menggunakan JavaScript

Akhir sekali, tambahkan fungsi pada tab yang dibuat dengan bantuan JavaScript:

< skrip >

berfungsi dahulu ( ) {

dokumen. getElementById ( 'samb1' ) . gaya . paparan = 'blok' ;

dokumen. getElementById ( 'sambung2' ) . gaya . paparan = 'tiada' ;

dokumen. getElementById ( 'samb3' ) . gaya . paparan = 'tiada' ;

}

fungsi kedua ( ) {

dokumen. getElementById ( 'sambung2' ) . gaya . paparan = 'blok' ;

dokumen. getElementById ( 'samb1' ) . gaya . paparan = 'tiada' ;

dokumen. getElementById ( 'samb3' ) . gaya . paparan = 'tiada' ;

}

fungsi ketiga ( ) {

dokumen. getElementById ( 'samb3' ) . gaya . paparan = 'blok' ;

dokumen. getElementById ( 'samb1' ) . gaya . paparan = 'tiada' ;

dokumen. getElementById ( 'sambung2' ) . gaya . paparan = 'tiada'

}

skrip >

Baris kod di atas:

Tentukan fungsi bernama “ pertama ”.
Dalam definisi fungsi ini, ' document.getElementById() ' kaedah mengakses elemen div yang idnya ialah 'cont1' dan menggunakan ' gaya ” harta dengan “ blok ” nilai padanya. Sifat ini akan memaparkan kandungan tab yang pengguna klik.
Seterusnya, 'document.getElementById()' mengakses div lain dan menggunakan sifat 'style' yang mempunyai nilai 'tiada' untuk menyembunyikannya. Ia akan menyembunyikan elemen itu pada halaman web.
Kaedah di atas dilakukan untuk elemen div yang diakses seterusnya. Ini kerana fungsi 'pertama' hanya memaparkan kandungan tab yang nilai sifat 'gaya'nya ialah 'sekat' dan menyembunyikan yang lain.
Prosedur di atas dilakukan untuk fungsi 'second()' dan 'third()' seterusnya.

Pengeluaran

Ia boleh dilihat bahawa tab berjaya dibuat dan menunjukkan kandungan masing-masing pada klik pengguna.

Kesimpulan

Untuk membuat tab mula-mula bina strukturnya menggunakan 'HTML', dan kemudian sesuaikan dengan bantuan sifat penggayaan CSS. Sifat penggayaan ditambah tanpa mengeksport sebarang helaian gaya tambahan. Sifat ini menjadikan tab menarik dan menarik perhatian. Setelah tab dibuat dan disesuaikan, kemudian gunakan bahasa pengaturcaraan JavaScript untuk menambah fungsi padanya. Panduan ini secara praktikal telah menerangkan prosedur lengkap untuk membuat tab dengan CSS dan JavaScript.

Bagaimana untuk Membuat Tab dengan CSS dan JavaScript?