Kontrol tab dalam bootstrap sangat populer di kalangan pengembang karena kesederhanaan dan kemudahan penggunaannya. Namun, gayanya relatif lajang, bagaimana cara mencapai efek yang lebih indah berdasarkan bentuk aslinya? Saya telah mempertimbangkan masalah ini. Selain itu, tab di Bootstrap harus mengklik setiap tab untuk mencapai switching. Bisakah Anda menggunakan jQuery untuk mengontrol switching otomatisnya dan membiarkannya beralih dari satu tab ke yang lain setelah periode waktu tertentu (seperti 5 detik)? Berikut ini adalah proses implementasi saya, pertama -tama, kode HTML dari bagian tab:
<Div Role = "TabPanel"> <!-tab nav-> <role = "tablist" style = "margin-top: 0px;" id = "Doctabs"> <role = "Presentation"> <a href = "#section_new" aria-controls = "home" role = "tab" data-koggle = "tab"> </a> <role = "popa> <a href =" data "#"#"#li"#"li (a li"#" Role = "Presentation"> <a href = "#section_month" aria-controls = "pesan" role = "tab"-koggle = "tab"> populer dalam 30 hari </a> </ul> <!-Panes tab-> <v> <Div Role = "tabpanel" id = "section_new"> <p>
Isi di Tab1
</p> </div> <div role = "TabPanel" id = "section_week"> <p>
Isi di Tab2
</p> </div> <Div Role = "TabPanel" id = "section_month"> <p>
Konten di tab3
</p> </div> </div> </div>
Kode -kode ini pada dasarnya sama dengan kode asli di Bootstrap. Anda tidak perlu membuat terlalu banyak perubahan, cukup isi data Anda sendiri.
Mari atur gaya tab. Gaya -gaya ini akan menimpa gaya asli dalam bootstrap untuk mencapai efek mempercantik tab.
<type style = "text/css">. Tab .Nav-tabs {border-bottom: 0 none; latar belakang: #eaeaea;}. Tab .Nav-tabs li a {border: transparan; border-radius: 0; font-size: 16px; border: none; color: #333; Padding: 12px 22px; .NAV-tab Li.active ai {border: 0 none; latar belakang: #e67e22; warna: #fff;}. Tab .Nav-tabs .Nav-tab Li.active A: Setelah {konten: ""; Posisi: Kiri: 45%; Bawah: -14px; Border: 7px Transparent; .tab-content {padding: 5px; color: #5a5c5d; font-size: 14px; line-height: 20px; margin-top: 5px; border-bottom: 1px solid #e67e22;}@media hanya layar dan (max-width: 480px) {.tab. 100%; latar belakang: transparan;}. Tab .Nav-tabs li.active a {border-radius: 10px 10px 0 0;}. Tab .Nav-tab Li:-anak pertama {border-botin-left-radius: 0;}. Tab. Nav-Tabs li a {margin-botin: 10px; Li.Active A: After {Border: none;}} </tyle>Setelah efek keluar, sepertinya ini:
Apakah lebih baik dari gaya asli bootstrap (tetapi setiap orang memiliki preferensi sendiri. Berikut ini hanya pengantar proses implementasi. Tentu saja, Anda juga dapat membuat gaya lain dengan memodifikasi CSS)
Mari kita lihat cara menerapkan switching tab otomatis. Tanpa basa -basi lagi, cukup masukkan kode:
// Tab Timer Fungsi Rotasi Otomatis (i) {Interval = setInterval (function () {$ ("#Doctabs li: eq ("+i+") a"). tab ('show'); i ++; if (i> 2) he = 0;}, 5000); interval return;} $ (function () {var i = 0;}, 5000); interval return;} $ (function () {var i = 0;}, 5000; di Area Daftar.Di atas adalah keindahan dan peningkatan kontrol tab di bootstrap yang diperkenalkan kepada Anda oleh editor (disarankan). Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!