web-dev-qa-db-ja.com

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を追加したいと思います。

jqueryshow-hide
146
Giri

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

.show()を使用した後にCSSプロパティを設定すると機能するはずです。 HTMLページの間違った要素をターゲットにしている可能性があります。

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

ただし、.show(), .hide()の効果を使用していない場合は、次のようにこれらのCSSプロパティを手動で設定しないでください。

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

次のようにshow（）またはfadeIn（）の直後にcss（）を使用します。

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

やった

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

魅力のように機能します。

5
user2204545

Razzのソリューションは.hide()および.show()メソッドでは機能しますが、.toggle()メソッドでは機能しません。

シナリオによっては、CSSクラス.inline_block { display: inline-block; }を持ち、$(element).toggleClass('inline_block')を呼び出すことで問題が解決します。

5
user968903

Show/hideの代わりに animate を使用できます

このようなもの：

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

アニメーションと最後に表示プロパティを設定する必要があると思います。その場合は、以下に示すようにshow()コールバックを使用する方が適切です

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

これにより、両方の結果が得られます。

2
Reza

これを試して：

$('#foo').show(0).css('display','inline-block');
2
Carlos
<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>
1
Jon

実際、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！を使用すると、おそらくここでは機能しません-通常、スタイルのインライン設定は他のルールよりも強力です

0
yarg

最良の.letは、親display :inline-blockにするか、親divを追加します。CSSにはdisplay :inline-blockしかありません。

0
wuball