web-dev-qa-db-fra.com

Masquer une div onload particulière, puis afficher div après clic

J'ai deux divs div1 et div2. Je veux que div2 soit automatiquement masqué, mais quand je clique sur preview div, puis div2 pour être visible et div1 pour le cacher C'est le code que j'ai essayé mais pas de chance :(

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div2").hide();
  $("#preview").click(function() {
    $("#div1").hide();
    $("#div2").show();
  });
});
</script>

<div id="div1">
This is preview Div1. This is preview Div1.
</div>

<div id="div2">
This is preview Div2 to show after div 1 hides.
</div>

<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
htmlclickjquery
11
swapnesh

Assurez-vous de regarder vos sélecteurs. Vous semblez avoir oublié le # pour div2. De plus, vous pouvez basculer la visibilité de plusieurs éléments à la fois avec .toggle():

// Short-form of `document.ready`
$(function(){
    $("#div2").hide();
    $("#preview").on("click", function(){
        $("#div1, #div2").toggle();
    });
});

Démo: http://jsfiddle.net/dJg8N/

25
Sampson

C'est un moyen plus facile de le faire. J'espère que cela t'aides...

<script type="text/javascript">
$(document).ready(function () {
    $("#preview").toggle(function() {
        $("#div1").hide();
        $("#div2").show();
    }, function() {
        $("#div1").show();
        $("#div2").hide();
    });
});

<div id="div1">
This is preview Div1. This is preview Div1.
</div>

<div id="div2" style="display:none;">
This is preview Div2 to show after div 1 hides.
</div>

<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
  • Si vous souhaitez que la div soit masquée lors du chargement, définissez le style display: none
  • Utilisez alterner plutôt que la fonction cliquer.


Liens:

Tutoriels JQuery

Références JQuery

7
Dom

Le caractère de hachage # est manquant avant les sélecteurs d'identifiant, cela devrait fonctionner:

$(document).ready(function() {
    $("#div2").hide();

    $("#preview").click(function() {
      $("#div1").hide();
      $("#div2").show();
    });

});

En savoir plus sur les sélecteurs d'ID jQuery

3
Sarfraz

Au début, si vous voulez masquer un élément div avec id = "abc" lors du chargement, puis basculez entre masquer et afficher en utilisant un bouton avec id = "btn", puis, 

$(document).ready(function() {
 $("#abc").hide(); 
  $("#btn").click(function() {
     $("#abc").toggle();
  });
});
0
KT Chanu
$(document).ready(function() {
    $('#div2').hide(0);
    $('#preview').on('click', function() {
        $('#div1').hide(300, function() { // first hide div1
            // then show div2
            $('#div2').show(300);
        });     
    });
});

Vous avez manqué # avant div2

Exemple de travail

0
thecodeparadox

La deuxième fois que vous faites référence à div2, vous n'utilisez pas le sélecteur # id. 

Il n'y a pas d'élément nommé div2. 

0
Madara Uchiha