如何在jQuery show()函数中添加display:inline-block?

时间:2012-02-13 11:51:12

标签: jquery show-hide

我有一些像这样的代码

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。

12 个答案:

答案 0 :(得分:189)

尝试使用CSS隐藏和显示内容,而不是show

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");
}

答案 1 :(得分:34)

使用.show()后设置CSS属性应该有效。也许你的目标是HTML页面上的错误元素。

 $('#foo').css('display', 'inline-block');

但是如果您没有使用.show(), .hide()的任何效果,为什么不手动设置这些CSS属性,如:

$('#foo').css('display','none'); 
$('#foo').css('display','inline-block');

答案 2 :(得分:9)

在show()或fadeIn()之后使用css(),如下所示:

$('div.className').fadeIn().css('display', 'inline-block');

答案 3 :(得分:5)

Razz的解决方案适用于.hide().show()方法,但不适用于.toggle()方法。

根据具体情况,拥有一个css类.inline_block { display: inline-block; }并调用$(element).toggleClass('inline_block')可以解决我的问题。

答案 4 :(得分:5)

我做到了

function showPanels()  {
    $('.panels').show("slow");
    $('.panels').css('display','inline-block');
}

就像一个魅力。

答案 5 :(得分:2)

您可以使用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");
}

答案 6 :(得分:2)

试试这个:

$('#foo').show(0).css('display','inline-block');

答案 7 :(得分:2)

我认为你想要动画并在最后设置显示属性。在这种情况下,您最好使用show()回调,如下所示

$("#my_obj").show(400,function() {
    $("#my_obj").css("display","inline-block")
}) ;

这样你就可以达到两个结果。

答案 8 :(得分:1)

<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>

答案 9 :(得分:0)

实际上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 important! 可能无法在此处运行 - 因为设置内联样式通常比任何其他规则更强

答案 10 :(得分:0)

最好的.let是父亲git show ":/pattern"^ 或添加父{4}} CSS只有display :inline-block

答案 11 :(得分:-5)

最好的方法是在选择器中添加!important后缀。

示例:

 #selector{
     display: inline-block !important;                   
}