我有一些像这样的代码
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}
show函数添加display:block。但是我想添加display:inline-block而不是block。
而不是show
,尝试使用CSS来隐藏和显示内容。
function switch_tabs(obj) {
$('.tab-content').css('display', 'none'); // you could still use `.hide()` here
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#' + id).css('display', 'inline-block');
obj.addClass("selected");
}
实际上jQuery只是清除'display'属性的值,并没有将它设置为'block'(参见jQuery.showHide()的内部实现) -
function showHide(elements, show) {
var display, elem, hidden,
...
if (show) {
// Reset the inline display of this element to learn if it is
// being hidden by cascaded rules or not
if (!values[index] && display === "none") {
elem.style.display = "";
}
...
if (!show || elem.style.display === "none" || elem.style.display === "") {
elem.style.display = show ? values[index] || "" : "none";
}
}
请注意,您可以覆盖$ .fn.show()/ $。fn.hide();隐藏时将原始显示存储在元素本身中(例如作为属性或在$ .data()中);然后在显示时再次应用它。
另外,使用css很重要!可能不会在这里工作 - 因为设置内联样式通常比任何其他规则更强
最好.let它的父亲display :inline-block
或添加父div
什么CSS只有display :inline-block
。
最好的方法是在选择器中添加!important后缀。
例:
#selector{
display: inline-block !important;
}
使用.show()
后设置CSS属性应该有效。也许您的目标是HTML页面上的错误元素。
$('#foo').css('display', 'inline-block');
但是,如果您没有使用.show(), .hide()
的任何效果,为什么不手动设置这些CSS属性,如:
$('#foo').css('display','none');
$('#foo').css('display','inline-block');
在show()或fadeIn()之后使用css(),如下所示:
$('div.className').fadeIn().css('display', 'inline-block');
我做到了
function showPanels() {
$('.panels').show("slow");
$('.panels').css('display','inline-block');
}
奇迹般有效。
Razz的解决方案适用于.hide()
和.show()
方法,但不适用于.toggle()
方法。
根据情况,拥有一个css类.inline_block { display: inline-block; }
并调用$(element).toggleClass('inline_block')
解决了我的问题。
您可以使用animate而不是show / hide
像这样的东西:
function switch_tabs(obj)
{
$('.tab-content').animate({opacity:0},3000);
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).animate({opacity:1},3000);
obj.addClass("selected");
}
试试这个:
$('#foo').show(0).css('display','inline-block');
我想你想要动画并在最后设置显示属性。在这种情况下,您最好使用show()
回调,如下所示
$("#my_obj").show(400,function() {
$("#my_obj").css("display","inline-block")
}) ;
这样你就可以达到两个结果。
<style>
.demo-ele{display:inline-block}
</style>
<div class="demo-ele" style="display:none">...</div>
<script>
$(".demo-ele").show(1000);//hide first, show with inline-block
<script>