Jak dodać display: inline-block w funkcji show () jQuery?

Mam taki kod:

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

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

Funkcja show dodaje display:block. Ale chciałbym dodać display:inline-blockzamiast bloku.

Zamiast tego showspróbuj użyć CSS, aby ukryć i pokazać zawartość.

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

Ustawienie właściwości CSS po użyciu .show()powinno działać. Być może kierujesz na niewłaściwy element na swojej stronie HTML.

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

Ale jeśli nie używasz żadnych efektów, .show(), .hide()dlaczego nie ustawisz tych właściwości CSS ręcznie, na przykład:

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

Użyj css () zaraz po show () lub fadeIn () w ten sposób:

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

ja to zrobiłem

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

działa jak marzenie.

Rozwiązanie Razza zadziałałoby w przypadku metod .hide()i .show(), ale nie zadziałałoby w przypadku .toggle()metody.

W zależności od scenariusza posiadanie klasy css .inline_block { display: inline-block; }i wywołanie $(element).toggleClass('inline_block')rozwiązuje problem za mnie.

Możesz użyć animacji zamiast pokaż / ukryj

Coś takiego:

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

Spróbuj tego:

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

Myślę, że chcesz zarówno animację, jak i ustawić właściwość wyświetlania na końcu. W takim przypadku lepiej użyj funkcji show()oddzwaniania, jak pokazano poniżej

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

W ten sposób osiągniesz oba rezultaty.

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

w rzeczywistości jQuery po prostu czyści wartość właściwości 'display' i nie ustawia jej na 'block' (zobacz wewnętrzną implementację 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";
        }
    }

Pamiętaj, że możesz przesłonić $ .fn.show () / $. Fn.hide (); przechowywanie oryginalnego wyświetlania w samym elemencie podczas ukrycia (np. jako atrybut lub w $ .data ()); a następnie zastosuj go ponownie podczas wyświetlania.

Ważne jest również używanie CSS ! prawdopodobnie nie zadziała tutaj - ponieważ ustawienie stylu w linii jest zwykle silniejsze niż jakakolwiek inna reguła

Najlepszym. Niech będzie rodzicem display :inline-blocklub dodaj rodzica divtylko z CSS display :inline-block.

Najlepszym sposobem jest dodanie! Ważnego sufiksu do selektora.

Przykład:

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