web-dev-qa-db-fra.com

Comment ajouter display: inline-block dans une fonction jQuery show ()?

J'ai du code comme ça

function switch_tabs(obj)
{
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");

    $('#'+id).show();
    obj.addClass("selected");
}

La fonction show ajoute display: block. Mais je voudrais ajouter display: inline-block au lieu de block.

jqueryshow-hide
149
Giri

Au lieu de show, essayez d’utiliser CSS pour masquer et afficher le contenu.

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

La définition de la propriété CSS après avoir utilisé .show() devrait fonctionner. Peut-être visez-vous le mauvais élément sur votre page HTML.

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

Mais si vous n'utilisez pas les effets de .show(), .hide(), pourquoi ne définissez-vous pas ces propriétés CSS manuellement, comme suit:

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

Utilisez css () juste après show () ou fadeIn () comme ceci:

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

Je l'ai fait

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

fonctionne comme un charme.

5
user2204545

La solution de Razz fonctionnerait pour les méthodes .hide() et .show() mais ne fonctionnerait pas pour la méthode .toggle().

Selon le scénario, avoir une classe css .inline_block { display: inline-block; } et appeler $(element).toggleClass('inline_block') résolvent le problème pour moi.

5
user968903

Vous pouvez utiliser animate au lieu de show/hide

Quelque chose comme ça:

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

Je pense que vous voulez à la fois l'animation et définir la propriété display à la fin. Dans ce cas, vous feriez mieux d'utiliser show() callback comme indiqué ci-dessous

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

De cette façon, vous obtiendrez les deux résultats.

2
Reza

essaye ça:

$('#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

en fait, jQuery efface simplement la valeur de la propriété 'display' et ne la définit pas sur 'bloquer' (voir la mise en oeuvre interne de 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";
        }
    }

Veuillez noter que vous pouvez remplacer $ .fn.show ()/$ .fn.hide (); stocker l’affichage original dans l’élément lui-même lors du masquage (par exemple sous forme d’attribut ou dans $ .data ()); et ensuite l'appliquer à nouveau lors de l'affichage.

En outre, l'utilisation de css important! ne fonctionnera probablement pas ici - car la définition d'un style en ligne est généralement plus stricte que toute autre règle.

0
yarg

Le meilleur .let est parent display :inline-block ou ajoute un parent div quel CSS n'a que display :inline-block.

0
wuball