Sujet Précédent Sujet Suivant

Afficher ou masquer une div en Jquery

Fermé
jsnew - 9 mars 2015 à 18:56
 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.





6 réponses

Réponse 1 / 6
Dr Zoidberg Messages postés 529 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 12 juin 2015 100
12 mars 2015 à 13:51
$(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é 
  });
});
3
Réponse 2 / 6
bbaasstt Messages postés 190 Date d'inscription mercredi 1 avril 2009 Statut Membre Dernière intervention 16 décembre 2016 17
10 mars 2015 à 19:35 
 $(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 :)
0
Réponse 3 / 6
jsnew
12 mars 2015 à 11:39
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");
  });
});
0
Réponse 4 / 6
Dr Zoidberg Messages postés 529 Date d'inscription jeudi 28 juin 2007 Statut Membre Dernière intervention 12 juin 2015 100
Modifié par Dr Zoidberg le 12/03/2015 à 11:59
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>

...
0

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

Posez votre question
Réponse 5 / 6
jsnew
12 mars 2015 à 12:40
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 !
0
Réponse 6 / 6
jsnew
12 mars 2015 à 15:05
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 !
0
jsnew
13 mars 2015 à 11:51
Fonctionne super, merci ;) !
0

Discussions similaires

programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
Afficher toutes les lignes masquées excel
livlarsen -
esicom -

26 réponses