Comment ajouter un affichage: un bloc en ligne dans une fonction jQuery show ()?


158

J'ai un code comme celui-ci:

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-blockau lieu de bloquer.


1
Vous devrez fournir quelques détails supplémentaires. Cela fonctionne pour moi dans un test rapide: jsfiddle.net/DD3Sf .
Gijs

@gijs Désolé, ça marche maintenant. Je pense que c'est un problème de cache. Merci pour votre temps
Giri

Réponses:


209

Au lieu de cela 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");
}

92
Cela peut sembler évident, mais si vous souhaitez toujours utiliser l'aspect de synchronisation de show( $("#id").show(500)), ajoutez-y simplement la cssfonction:$("#id").show(500).css("display", "inline-block");
BenR

2
Je voudrais aller plus loin et m'occuper de tout le masquage / affichage en utilisant des classes CSS, pas jQuery. $('.tab-content').addClass('hidden'); (...) $('#' + id).removeClass('hidden'); Dans le CSS:.hidden { display: none !important }
Joe Maffei

10
Même si c'est la réponse acceptée, mais elle ne reflète pas ce qui est indiqué dans la documentation jquery : cela équivaut à peu près à appeler .css ("afficher", "bloquer"), sauf que la propriété d'affichage est restaurée à ce qu'elle était initialement. Si un élément a une valeur d'affichage en ligne, puis est masqué et affiché, il sera à nouveau affiché en ligne. Donc, pour avoir une valeur par défaut, displayvous devez ajouter une classe dans votre css avec display:inline-block;puis appeler hide()et show()utiliser l'id de l'élément. C'est un code plus propre et plus prévisible et plus facile à styliser.
Abdullah Adeeb

1
@AbdullahAdeeb le problème est que vous auriez besoin de hide()js lors du chargement de la page. Le réglage #element{display:inline-block;display:none;}ne fait pas l'affaire. Je pense que la solution la plus propre est $('#element').fadeIn().addClass('displaytype');- meilleure que la réponse ci-dessus, car vous pouvez définir différents .displaytypes dans css et avoir une fonction d'affichage dans js. Voir ma réponse ici: stackoverflow.com/questions/1091322/…
Fanky

36

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

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

Mais si vous n'utilisez aucun effet, .show(), .hide()pourquoi ne pas définir ces propriétés CSS manuellement comme:

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

3
Notez que jquery show / hide / toggle restaure les valeurs d'affichage précédentes. Donc, si vous le cachez avec jquery, l'appel à show fonctionnera.
Curtis Yallop

"La définition de la propriété CSS après avoir utilisé .show () devrait fonctionner." Quel est l'intérêt d'utiliser show () si vous allez quand même mettre à jour manuellement le css?
JSON

9

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

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

5

Je l'ai fait

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

fonctionne comme un charme.


7
Est-ce une réponse ou une reconnaissance…?
NREZ

5

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

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


2

Vous pouvez utiliser l' animation insted 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

essaye ça:

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

Le show()dedans est inutile. C'est la même chose que$('#foo').css('display','inline-block');
Liam

@Liam Pas inutile. Vous pouvez changer le 0 pour faciliter l'entrée, ou le modifier pour accéder à d'autres showoptions uniques .
JSideris

2

Je pense que vous voulez à la fois l'animation et définir la propriété d'affichage à la fin. Dans ce cas, vous feriez mieux d'utiliser le show()rappel 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.


Ce n'est pas correct, vous ne vous retrouveriez avec le inline-blockmode qu'après l'exécution de toute l'animation. Cela signifie qu'il «pop» entre blocket inline-blockaprès les 400 ms.
Alexis Wilke

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

0

en fait, jQuery efface simplement la valeur de la propriété 'display', et ne la définit pas sur 'block' (voir l'implémentation 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 en tant qu'attribut ou dans $ .data ()); puis appliquez-le à nouveau lors de l'affichage.

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


0

Le meilleur .let c'est parent display :inline-blockou ajouter un parent divce que CSS n'a que display :inline-block.


-5

Le meilleur moyen est d'ajouter le suffixe! Important au sélecteur.

Exemple:

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

3
cela n'empêche-t-il pas .hide ()?
Kaan Soral

! important n'est nécessaire que dans les cas extrêmes lorsqu'il n'y a pas d'autre option. Ce n'est pas la bonne façon d'aborder ce problème à mon avis quand il peut être corrigé avec un meilleur code jQuery.
Brandon

6
La chose importante à retenir !importantest qu'il est important de ne pas l'utiliser.
user1728278
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.