[jquery] 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블록 대신 추가하고 싶습니다 .

답변

대신 showCSS를 사용하여 내용을 숨기고 표시해보십시오.

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()and .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');