Afficher ou masquer une div en Jquery

jsnew -
jsnew - 13 mars 2015 à 11:51

Bonjour,

J'aimerai savoir quelle serait la meilleur solution, pour masquer et afficher une div (une page dans une web app monopage).

Je pensais réaliser, 5 sections et en fonction du clique sur un bouton de mon menu, cela appliquerait une classe "active" sur la page que je veux et fait un removeClass active sur toutes les autres sections.

Ma question est comment cibler la section que je veux en JQuery ?

Exemple :

HTML :

<section class="page1"></section>
<section class="page2 active"></section>
<section class="page3"></section>
<section class="page4"></section>
<section class="page5"></section>

<nav>
<a href="page1"></a>(au clique ajoute active et retire aux autres pages)
<a href="page2"></a>(au clique ajoute active et retire aux autres pages)
<a href="page3"></a>(au clique ajoute active et retire aux autres pages)
<a href="page4"></a>(au clique ajoute active et retire aux autres pages)
<a href="page5"></a>(au clique ajoute active et retire aux autres pages)
</nav>

CSS :

section{
display:none;
}

.active{
display:block
}

JS:

Comment cibler les éléments ?

Merci d'avance pour vos réponses.

Afficher la suite

A voir également:

Afficher ou masquer une div en Jquery
Masquer une conversation whatsapp - Guide
Comment appeler en masquer - Guide
Afficher appdata - Guide
Comment masquer les amis sur facebook - Guide
Comment masquer une photo dans la galerie - Guide

6 réponses

Réponse 1 / 6

Dr Zoidberg Messages postés 529 Date d'inscription Statut Membre Dernière intervention 100

$(this).attr("data-page") --> va chercher le contenu de l'attribut data-page du bouton cliqué, je rajoute # devant pour dire qu'on selectionne par l'id, et ensuite j'appel show() sur cet element.

Avec les classes : (je n'ai pas testé)

$(function() {                      
  $(".bouton").click(function() {     
      $(".bouton").removeClass("active_bouton"); //Supprime le style de tous les elements qui ont la class bouton
      $(".page").removeClass("active_page");  // supprimer le style sur tous les elements qui ont la class page
      $("#"+$(this).attr("data-page")).addClass("active_page"); // ajoute la class sur l'element ayant l'id correspondant au contenu du data-page du bouton cliqué
      $(this).addClass("active_bouton"); // ajoute la class au bouton cliqué 
  });
});

Réponse 2 / 6

bbaasstt Messages postés 191 Date d'inscription Statut Membre Dernière intervention 17

 $(document).ready(function() {

        $('#tonboutton').click(function() {
        $('#sectionàcacher').toggle();
        $('#section2àcacher').toggle();
        $('#section3àcacher').toggle();
        ...


        return false;
          });
         });

Donc voila avec ça tout devrait rouler comme tu veut !

(pour ton cas si tu veut cacher la section page1, dans un premier temps tu rajoute une classe ou un ID à ton <a> tu fait ensuite:
$('.nav_page1').click(fonction(){
$('.page1').toggle();})

voilou :)

Réponse 3 / 6

jsnew

Ha super merci, je pensais ne pas avoir de réponse :D.

Entre temps j'ai trouvé une autre solution, peux tu me dire si elle convient aussi et si tu n as pas une solution plus simple ? Car si je dois ajouter pleins de pages en plus ca devient vite le bordel :).

Exemple de ma solution :


// HTML:

<nav>
<button class="lien_accueil" href="#accueil">accueil </button>
<button class="lien_page1" href="#page1">page 1 </button>
<button class="lien_page2" href="#page2">page 2 </button>
<button class="lien_page3" href="#page3">page 3 </button>
<button class="lien_page4" href="#page4">page 4 </button>
</nav>

<section class="page1"></section>
<section class="page2"></section>
<section class="page3"></section>
<section class="page4"></section>
<section class="page5"></section>

// CSS

section {
position: fixed;
width: 100%; height: 100%;
-webkit-transform: translateX(100%);
}
 
.active_page {
-webkit-transform: translateX(0);
}

// JS

$(function() {                    
  $("#bouton_mesvols").click(function() {     
      $(page1).removeClass("active_page"); 
      $(page2).removeClass("active_page");
      $(page3).removeClass("active_page"); 
      $(accueil).removeClass("active_page"); 
      $(page1).addClass("active_page");
  });
});

$(function() {                      
  $("#bouton_decoller").click(function() {     
      $(page1).removeClass("active_page"); 
      $(page2).removeClass("active_page");
      $(page3).removeClass("active_page"); 
      $(accueil).removeClass("active_page"); 
      $(page2).addClass("active_page");
  });
});

$(function() {                      
  $("#bouton_services").click(function() {     
      $(page1).removeClass("active_page"); 
      $(page2).removeClass("active_page");
      $(page3).removeClass("active_page"); 
      $(accueil).removeClass("active_page"); 
      $(page3).addClass("active_page");
  });
});

Réponse 4 / 6

Dr Zoidberg Messages postés 529 Date d'inscription Statut Membre Dernière intervention 100

Salut,

Plus simple et plus portable mais ce n'est qu'un point de départ:

...


  $(document).ready(function(){
   $(".page").hide();
   $("#accueil").show();
   $(".bouton").click(function(){ 
    $(".page").hide();
    $("#"+$(this).attr("data-page")).show();
   });
  });

...

 <nav>
<button class="bouton" data-page="accueil">accueil </button>
<button class="bouton" data-page="page1">page 1 </button>
<button class="bouton" data-page="page2">page 2 </button>
<button class="bouton" data-page="page3">page 3 </button>
<button class="bouton" data-page="page4">page 4 </button>
</nav>

<section class="page" id="page1">.1..</section>
<section class="page" id="page2">.2..</section>
<section class="page" id="page3">..3.</section>
<section class="page" id="page4">.4../section>
<section class="page" id="accueil">.a..</section>

...

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

jsnew

Peux tu m'expliquer cette ligne :

$("#"+$(this).attr("data-page")).show();

Je ne suis pas sûr d'avoir bien compris.

Avec mon code :

<nav>
<button class="bouton" data-page="accueil">accueil </button>
<button class="bouton" data-page="page1">page 1 </button>
<button class="bouton" data-page="page2">page 2 </button>
<button class="bouton" data-page="page3">page 3 </button>
<button class="bouton" data-page="page4">page 4 </button>
</nav>

<section class="page" id="page1">.1..</section>
<section class="page" id="page2">.2..</section>
<section class="page" id="page3">..3.</section>
<section class="page" id="page4">.4../section>
<section class="page" id="accueil">.a..</section>


$(function() {                      
  $(".bouton").click(function() {     
      $(page).removeClass("active_page"); 
      $("#"+$(this).attr("data-page")).addClass("active_page");
  });
});

Est ce que cela fonctionnerait ? Je vais aller encore un peu plus loin, si je voulais ajouter une classe spécifique à mon bouton je pourrait faire comme cela ? :

$(function() {                      
  $(".bouton").click(function() {     
      $(.bouton).removeClass("active_bouton"); 
      $(page).removeClass("active_page"); 
      $("#"+$(this).attr("data-page")).addClass("active_page");
      $("#"+$(this).attr("data-bouton")).addClass("active_bouton"); 
  });
});

Qu'en penses tu ?
Encore merci pour ton aide !

Réponse 6 / 6

jsnew

Je vais aller tester ça tout de suite, ça me semble super et bien plus simple que ce que je comptais faire :D !

Merci beaucoup !

jsnew

Fonctionne super, merci ;) !

Discussions similaires

additionner nombres dans cellules avec texte

ne pas voir la story de quelqu'un mais sans la bloquer

Votre réponse

Discussions similaires