Saya punya beberapa kode seperti ini:
function switch_tabs(obj) {
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#' + id).show();
obj.addClass("selected");
}
Fungsi acara bertambah display:block
. Tapi saya ingin menambahkan display:inline-block
bukan blokir.
Jawaban:
Alih-alih
show
, coba gunakan CSS untuk menyembunyikan dan menampilkan konten.sumber
show
($("#id").show(500)
), tambahkan sajacss
fungsinya:$("#id").show(500).css("display", "inline-block");
$('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden');
Dalam CSS:.hidden { display: none !important }
display
Anda perlu menambahkan kelas di css Anda dengandisplay:inline-block;
kemudian memanggilhide()
danshow()
menggunakan id elemen. Ini lebih bersih dan lebih mudah diprediksi dan lebih mudah ditata.hide()
dengan js saat memuat halaman. Pengaturan#element{display:inline-block;display:none;}
tidak berhasil. Saya pikir solusi terbersih adalah$('#element').fadeIn().addClass('displaytype');
- lebih baik daripada jawaban di atas, karena Anda dapat mengatur berbeda.displaytype
di css dan memiliki satu fungsi yang menunjukkan di js. Lihat jawaban saya di sini: stackoverflow.com/questions/1091322/…Mengatur properti CSS setelah Anda gunakan
.show()
harus bekerja. Mungkin Anda menargetkan elemen yang salah di halaman HTML Anda.Tetapi jika Anda tidak menggunakan efek
.show(), .hide()
mengapa Anda tidak mengatur properti CSS secara manual seperti:sumber
Gunakan css () sesaat setelah show () atau fadeIn () seperti ini:
sumber
Saya melakukan itu
bekerja seperti pesona.
sumber
Solusi Razz akan bekerja untuk
.hide()
dan.show()
metode tetapi tidak akan bekerja untuk.toggle()
metode.Tergantung pada skenarionya, memiliki kelas css
.inline_block { display: inline-block; }
dan menelepon$(element).toggleClass('inline_block')
memecahkan masalah bagi saya.sumber
Anda dapat menggunakan animate insted show / hide
Sesuatu seperti ini:
sumber
coba ini:
sumber
show()
hal ini tidak ada gunanya. Ini sama dengan$('#foo').css('display','inline-block');
show
opsi unik lainnya.Saya pikir Anda ingin animasi dan mengatur properti tampilan di akhir. Dalam hal ini Anda lebih baik menggunakan
show()
panggilan balik seperti yang ditunjukkan di bawah iniDengan cara ini Anda akan mencapai kedua hasil.
sumber
inline-block
mode hanya setelah seluruh animasi berjalan. Itu berarti "pop" antarablock
daninline-block
setelah 400ms.sumber
sebenarnya jQuery hanya membersihkan nilai properti 'display', dan tidak mengaturnya menjadi 'block' (lihat implementasi internal jQuery.showHide ()) -
...
...
Harap dicatat bahwa Anda dapat mengganti $ .fn.show () / $. Fn.hide (); menyimpan tampilan asli dalam elemen itu sendiri ketika bersembunyi (misalnya sebagai atribut atau dalam $. Data ()); dan kemudian menerapkannya kembali saat ditampilkan.
Juga, menggunakan css penting! mungkin tidak akan berfungsi di sini - karena menetapkan inline gaya biasanya lebih kuat daripada aturan lainnya
sumber
. .Let Yang terbaik itu orang tua
display :inline-block
atau tambahkan orang tuadiv
apa yang hanya dimiliki CSSdisplay :inline-block
.sumber
Cara terbaik adalah menambahkan sufiks penting ke pemilih.
Contoh:
sumber
!important
adalah bahwa penting untuk tidak menggunakannya.