Afficher/cacher la div sur le bouton cliquez sur

Je suis en train d'afficher et de masquer le contenu selon le bouton est pressé. Le bouton suivant devrait afficher le contenu de 2 et de masquer du contenu 1, et le bouton précédent faudrait faire l'inverse.

<script type="text/javascript">
    $('a.button-next').click(function() {
        $("#tab-content2").addClass("show");
    });
</script>

CSS:

#tab-content2 {
    display: none;
}
#tab-content2.show {
    display: none;
}

HTML:

<div id="tab-content1">             
    <?php the_content(); ?>
</div>

<div id="tab-content2">     
    <?php the_field("experience");?>
</div>

<a href="javascript:;" class="button-back">Previous</a>
<a href="javascript:;" class="button-next">next</a>
Essayez cette $("#tab-content2").toggle() de cette façon, vous n'avez même pas besoin de css
Vos deux classes CSS sont mis à display: none;. Aussi, vous n'avez aucun document prêt gestionnaire autour de votre jQuery.
jQuery ne viennent avec .show() et .hide()...
Pourquoi personne n'a dit que c'est un doublon? Il suffit de regarder les questions connexes

OriginalL'auteur Amesey | 2013-02-01

  1. 3

    Essayer toggleClass et n'oubliez pas d'utiliser document.prêt():

    $(document).ready(function() {
    $('a.button-next').click(function() {
        $("#tab-content2").toggleClass("show");
    });
});

#tab-content2.show {display:block;}
    Où est le violon, l'homme? 😀

    OriginalL'auteur Barlas Apaydin

  2. 3

    Utilisation d'une classe générique pour tous les contenus

    <div class="content" id="tab-content1">             
    <?php the_content(); ?>
</div>
<div class="content" id="tab-content2">     
    <?php the_field("experience");?>
</div>

<a href="javascript:;" class="button-back">Previous</a>
<a href="javascript:;" class="button-next">next</a>

    De sorte que le css serait

    .content {
    display: none;
}

    Et le Javascript

    $('a.button-next').click(function() {
    $('.content').hide(); //To hide all other contents
    $("#tab-content2").show(); //Show the one content you want to display
});

    OriginalL'auteur ieeehh

  3. 1

    La propriété d'affichage de show est none.

    Changer de block.

    Aussi, vous pouvez simplement utiliser le .show() ou .hide() fonction au lieu d'utiliser des classes.

    OriginalL'auteur Brandon

  4. 1

    ...

    $('a.button-next').on('click', function() {
    $("#tab-content2").toggle("show");
});

    OriginalL'auteur MG_Bautista

  5. 1

    HTML

    <div id="tab-content-holder">
    <div id="tab-content1 show">             
        <?php the_content(); ?>
    </div>

    <div id="tab-content2">     
        <?php the_field("experience");?>
    </div>
</div>

<a href="#" class="button-back">Previous</a>
<a href="#" class="button-next">Next</a>

    JS

    $(document).ready(function() {
    $(".button-back").click(function() {
        MenuNavigationClick(-1);
    });
    $(".button-next").click(function() {
        MenuNavigationClick(1);
    });

    function MenuNavigationClick(direction) {
        //Get current element index and toggle
        var current = $("#tab-content-holder .show");
        var index = current.index();
        current.toggleClass("show");

        //Move to next element and check for overflow
        index += 1 * direction;
        index %= $("#tab-content-holder div").length;

        //Toggle next element
        $("#tab-content-holder div:eq("+index+")").toggleClass("show");
    }
});

    CSS

    #tab-content-holder div {
    display: none;
}
#tab-content-holder div.show {
    display: block;
}

    OriginalL'auteur Aleksandar Toplek

  6. 0

    Avez-vous essayé le transfert de la classe d'exposition sur une autre ligne?

    .show
{
    display: block;
}

    OriginalL'auteur Gian Acuna