如何在jQuery show（）函数中添加display：inline-block？

我有一些这样的代码：

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而不是阻止。

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

使用完后设置CSS属性.show()应该可以。也许您在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')可以为我解决问题。

您可以使用显示/隐藏的动画

像这样：

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');

我想您既要动画又要在最后设置display属性。在这种情况下，您最好使用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>

实际上，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或添加divCSS仅具有的父元素display :inline-block。

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

例：

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