JQuery show () işlevinde display: inline-block nasıl eklenir?

Ben böyle bir kod var:

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

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

Show işlevi eklenir display:block. Ama display:inline-blockblok yerine eklemek istiyorum .

Bunun yerine show, içeriği gizlemek ve göstermek için CSS kullanmaya çalışın.

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

Kullandıktan sonra CSS özelliğini ayarlamak .show()işe yarayacaktır. Belki HTML sayfanızdaki yanlış öğeyi hedefliyorsunuz.

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

Ancak, .show(), .hide()neden herhangi bir efekt kullanmıyorsanız, bu CSS özelliklerini manuel olarak şu şekilde ayarlamıyorsunuz:

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

Show () veya fadeIn () yönteminden hemen sonra css () kullanın:

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

Ben bunu yaptım

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

tıkır tıkır çalışıyor.

Razz'ın çözümü .hide()ve .show()yöntemleri için işe yarayacak, ancak .toggle()yöntem için işe yaramayacaktır .

Senaryoya bağlı olarak, bir css sınıfına sahip olmak .inline_block { display: inline-block; }ve çağırmak $(element).toggleClass('inline_block')sorunu benim için çözer.

Show / hide animasyonunu kullanabilirsiniz

Bunun gibi bir şey:

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

bunu dene:

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

Sanırım hem animasyon hem de sonunda display özelliğini ayarlamak istiyorsunuz. Bu durumda show(), aşağıda gösterildiği gibi geri aramayı daha iyi kullanırsınız

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

Bu şekilde her iki sonucu da elde edersiniz.

<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>

aslında jQuery sadece 'display' özelliğinin değerini temizler ve bunu 'block' olarak ayarlamaz (bkz. jQuery.showHide () dahili uygulaması) -

   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";
        }
    }

Lütfen $ .fn.show () / $. Fn.hide (); gizlendiğinde orijinal görüntüyü öğenin kendisinde saklamak (örneğin bir özellik olarak veya $ .data ()); ve gösterirken tekrar uygular.

Ayrıca, css kullanarak önemli! muhtemelen burada çalışmaz - çünkü bir stil satır içi ayarlamak genellikle diğer kurallardan daha güçlüdür

En iyisi .let üst öğe display :inline-blockveya divyalnızca CSS'nin sahip olduğu bir üst öğe ekleyin display :inline-block.

En iyi yol seçiciye! Son ekini eklemektir.

Misal:

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