Tab aktif tidak menampilkan garis bawah saat berada di Modal meskipun saya telah memberi salah satu tab class dari active. Namun, begitu saya mengeklik salah satu tab, tab itu mulai berfungsi. Apa masalahnya?
Berikut adalah JSFiddle.
Dan inilah tempat di mana saya memberi nama class yang tepat pada elemen tersebut:
...
<a class="active" href="/id#test1">Test 1</a>
...
Bantuan apa pun akan dihargai.
Garis bawah akan muncul jika Anda menginisialisasi tab menggunakan opsi ready pada jendela Modal.
Sesuatu seperti ini:
$('.modal-trigger').leanModal({
ready: function () {
$('ul.tabs').tabs();
}
});
Ini biolanya: https://jsfiddle.net/powxw392/
Jika Anda ingin sedikit animasi saat membuka jendela modal, tempatkan inisialisasi tab di luar fungsi modal dan tambahkan acara klik seperti:
$('ul.tabs').tabs();
$('.modal-trigger').leanModal({
ready: function () {
$('#firstTab').click();
}
});
biola: https://jsfiddle.net/qj0r84dr/
Kedua opsi tersebut memungkinkan Anda mempertahankan animasi garis bawah yang berpindah dari tab ke tab.
Alasan Anda tidak melihat garis bawah adalah karena tidak ada garis bawah.
Baris yang Anda lihat adalah div dengan kelas indicator yang berpindah secara terprogram ke tab mana pun yang dipilih.
Menurut saya, Anda dapat mengganti indikator dengan CSS Anda sendiri:
.tabs .indicator { display: none; }
.tabs .tab a.active { border-bottom: 2px solid #f6b2b5; }
Masalahnya di sini adalah Anda kehilangan animasinya.
Anda juga dapat menyetel posisi indikator secara manual:
$('#modal1').find('.indicator').attr('style', 'right: 415.333px; left: 0px;');
Masalahnya yang ini agak kotor.
Biola yang diperbarui (dengan pilihan kedua).
