Bagaimana Bekerja dengan Tab di CSS3 - dummies

Banyak pengembang menggunakan antarmuka tab untuk mengurangi kerumitan aplikasi Jika Anda dapat memfokuskan perhatian pengguna pada satu item pada satu waktu, Anda dapat menemukan kode lengkap untuk contoh ini di folder Bab 06Widgets dari kode yang dapat didownload sebagai Tab. HTML

$ (Anda dapat menemukan kode lengkap untuk contoh ini di folder Bab 06Widgets dari kode yang dapat didownload sebagai Tab. function () {$ ("# Configuration") tabs ();});

Trik untuk contoh ini ada pada tag HTML, sama seperti contoh widget Accordion. Ada beberapa perbedaan penting dalam bagaimana Anda membuat dua halaman untuk mendapatkan tampilan yang diinginkan, seperti yang ditunjukkan pada kode berikut:

Warna latar depan
Warna Latar Belakang
Pilihan

Merah 

… Lebih banyak masukan dan label … Merah 
… Masukan dan label lebih banyak lagi … Gunakan Suara Khusus 
Gunakan Efek Khusus

Perhatikan bahwa elemen

hilang dalam kasus ini. Alih-alih menggunakan judul untuk menentukan pemisahan antar elemen, Anda memberi daftar yang tidak berurutan (

). Daftar ini harus berisi href untuk masing-masing elemen di halaman. Tidak ada bedanya konten halaman. Anda juga perlu menyediakan beberapa CSS untuk memformat kontrol seperti yang ditunjukkan di sini.

#Configuration {width: 90%; Pada kasus ini, gaya #Configuration mendefinisikan keseluruhan ukuran antarmuka tab dan fakta bahwa tab memiliki teks terpusat. Div #Configuration mengubah penyelarasan konten ke kiri.



Untuk membuat perubahan, Anda klik tab yang berisi informasi yang ingin Anda lihat. Anda membuat perubahan seperti biasa. Mengklik tombol Change Configuration akan mengirimkan perubahan ke server. Jika Anda menguji contoh ini dengan menggunakan proses yang sama dengan contoh akordeon, Anda mendapatkan hasil yang persis sama - hanya tampilan antarmuka yang telah berubah.