jQuery show()函数显示内联块.怎么样？

Question

我有一些像这样的代码

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");

    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

显示功能添加显示:块.但我想添加display:inline-block而不是block.

有人能帮我吗？谢谢

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

我做到了

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

奇迹般有效.