web-dev-qa-db-fra.com

Cacher initialement un div pour un affichage ultérieur

Ma page Web ressemble à ceci:

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff" style="display:none">
TEXT, FORMS, and STUFF
</div>

<a id="btn1">DD</a>
<a id="btn2">DD</a>
<a id="btn3">DD</a>

En vertu de cela, jQuery clique sur des événements qui définissent l'affichage de l'élément sur lequel le clic a été hérité et les autres sur aucun.

$("#btn2").click(function (e) {
    $("#id1").css('display','none');
    $("#id3").css('display','none');
    $("#id2").css('display','inherit');
});

L'affichage et le masquage fonctionnent correctement, mais je remarque que certains éléments des divs initialement masqués ne sont pas correctement rendus, notamment les éléments manipulés par CSS. Essentiellement, lorsque la page se charge, les divs masquées ne sont pas correctement rendues et, lorsqu'elles sont affichées, les choses semblent laides. Quel est le moyen de le faire correctement?

MODIFIER::::::::::::::::::::::::::::::::::::::::::::::

Ce que j'ai fini par faire est de définir toutes les divs initialement masquées sur "Visibilité: Aucune", puis dans l'événement Pages onLoad () en réglant l'affichage: Aucune. Lorsque je bascule, je modifie à la fois la visibilité et l'affichage. Tout se rend correctement et parce que les choses sont statiquement réglées sur non visible, il n'y a pas 2 secondes laides où toutes les divs montrent.

javascriptjquerycsshtmlvisibility
16
user974896

Essayez d'utiliser visibility à la place. Exemple:

$("#id2").click(function (e) {
    $("#id1").css('visibility','hidden');
    $("#id3").css('visibility','hidden');
    $("#id2").css('visibility','visible');
});

display et visibility peuvent tous deux avoir une incidence sur le comportement du navigateur.

Une solution de rechange aux deux consiste à définir la opacity des divs que vous souhaitez masquer sur 0. Cela fonctionne toujours dans mon expérience mais est moins élégant.

Mise à jour en réponse au commentaire: Dans ce cas, vous pouvez définir d'autres propriétés telles que width et height sur 0px et le over-flow sur hidden afin que les div n'occupent aucun espace à l'écran. Moche, mais basique, et fonctionne.

<style>
.hidden {
    visibility: hidden;
    overflow: hidden;
    width: 0px;
    height: 0px;
}
</style>

<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Aster_Tataricus.JPG/245px-Aster_Tataricus.JPG"/></div>
<div class="hidden"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Chamomile%40original_size.jpg/280px-Chamomile%40original_size.jpg"/></div>
<div><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Jonquil_flowers06.jpg/320px-Jonquil_flowers06.jpg"/></div>

Vous pouvez utiliser les méthodes jQuery addClass et removeClass pour rendre les div visibles et invisibles, par exemple: $("#id1").removeClass("hidden"); et $("#id3").addClass("hidden");.

11
Oliver Moran

Pourquoi ne pas utiliser jQuery show et hide?

Cachez les éléments que vous voulez cacher (duh) lors du chargement de page avec CSS:

#id1, #id2, .. {
    display: none;
}

Ou vous pouvez le cacher avec Javacript:

$('#id1, #id2, ..').hide();

Affichez-les ou masquez-les en utilisant:

$('#btn2').click(function() {
    $('#id1, #id3').hide();
    $('#id2').show();
});
5
Sven van Zoelen

Il est préférable de ne pas ajouter de logique d’affichage à votre marque. Une meilleure façon de le faire serait: 

.hidden{ display:none;}

.

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff hidden" >
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

.

$(".stuff").click(function () {
    $(".stuff").addClass('hidden');
    $(this).removeClass('hidden');

});

J'espère que cela vous aidera si vous avez toujours des problèmes de rendu, alors essayez maby 

.hidden{ visibility:hidden; }
.stuff{display:block;}
3
Dominic Green

J'aime le faire comme ça:
javascript:

$('#btn2').click(function(){
    $('#id1').addClass('hidden');
    $('#id3').addClass('hidden');
    $('#id2').removeClass('hidden');
});

css:

.hidden {
    display: none;
}

html:

<div id="id1" class="stuff">
TEXT, FORMS, and STUFF
</div>

<div id="id2" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

<div id="id3" class="stuff hidden">
TEXT, FORMS, and STUFF
</div>

<a id="btn1">DD</a>
<a id="btn2">DD</a>
<a id="btn3">DD</a>
1
Aust

Peut-être que .toggle peut vous aider à atteindre cet objectif?

$("#btn2").click(function (e) { 
    $("#id1").toggle(); 
    $("#id2").toggle();
    $("#id3").toggle();
});
1
Dom
window.onload = pre_loader;

function pre_loader() {

    javascript:document.getElementById('loader').style.visibility='hidden';

    javascript:document.getElementById('loader').style.opacity=0;

}
0
user5044085