display 추가 방법: jQuery show() 기능에서 inline-block?

display 추가 방법: jQuery show() 기능에서 inline-block?

이런 코드가 있어요

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

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

쇼 기능이 추가됩니다.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()methods 그러나 작동하지 않습니다..toggle()방법.

시나리오에 따라서 CSS 수업을 하는 것..inline_block { display: inline-block; }그리고 전화를$(element).toggleClass('inline_block')문제를 해결해 줄 겁니다

시도해 보십시오.

$('#foo').show(0).css('display','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");
}

애니메이션과 마지막에 디스플레이 속성을 설정하는 것 모두 원하시는 것 같습니다.그런 경우에는 사용하는 것이 좋습니다.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 important!를 사용하는 것은 아마도 여기서는 작동하지 않을 것입니다. 왜냐하면 인라인으로 스타일을 설정하는 것은 보통 다른 어떤 규칙보다 강하기 때문입니다.

최고의 .부모가 되게 하라.display :inline-block또는 부모 추가divCSS에만 있는 것display :inline-block.

가장 좋은 방법은 !important 접미사를 선택기에 추가하는 것입니다.

예:

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

언급URL : https://stackoverflow.com/questions/9260009/how-to-add-displayinline-block-in-a-jquery-show-function