Masquer le div onload particulier et ensuite afficher div après clic

J'ai deux divs div1 et div2. Je veux div2 être automatiquement caché, mais quand je clique sur preview div puis div2 à être rendue visible et div1 à 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>

source d'informationauteur swapnesh

  1. 22

    Assurez-vous de regarder votre sélecteurs. Vous semblez avoir oublié le # pour div2. En outre, vous pouvez activer /désactiver la visibilité de nombreux é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/

  2. 7

    C'est un moyen plus facile de le faire. Espérons que cela aide...

    <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 voulez la div pour être cachés sur la charge, que le style display:none
    • Utilisation bascule plutôt que cliquez sur fonction.


    Liens:

    Tutos JQuery

    JQuery Références

  3. 2

    Il vous manque # dièse avant sélecteurs d'id, cela devrait fonctionner:

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

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

});

    En savoir Plus à propos de jQuery Sélecteurs d'ID

  4. 0

    La deuxième fois que vous faites allusion, div2, vous n'êtes pas en utilisant le # sélecteur d'id.

    Il n'y a aucun élément nommé div2.

  5. 0
    $(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

    Échantillon De Travail

  6. 0

    Au premier abord, si vous voulez cacher élément div avec id = "abc" à la charge, puis de basculer entre l'affichage et masquage à l'aide d'un bouton id = "btn" alors, 

    $(document).ready(function() {
 $("#abc").hide(); 
  $("#btn").click(function() {
     $("#abc").toggle();
  });
});