A voir également:
- Afficher ou masquer une div en Jquery
- Ce programme est écrit en python. il construit un mot secret dans une variable mais il ne l'affiche pas. modifiez-le pour qu'il affiche le mot secret. exécutez-le. quel est ce mot secret ? ✓ - Forum Python
- Appeler en masqué - Guide
- Masquer conversation whatsapp - Guide
- Afficher un tableau en c - Forum C
- Masquer en ligne whatsapp - Guide
6 réponses
Dr Zoidberg
Messages postés
528
Date d'inscription
jeudi 28 juin 2007
Statut
Membre
Dernière intervention
12 juin 2015
100
12 mars 2015 à 13:51
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é)
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é
});
});
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
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 :)
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 :
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");
});
});
Dr Zoidberg
Messages postés
528
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
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:
...
...
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
Peux tu m'expliquer cette ligne :
$("#"+$(this).attr("data-page")).show();
Je ne suis pas sûr d'avoir bien compris.
Avec mon code :
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 ? :
Qu'en penses tu ?
Encore merci pour ton aide !
$("#"+$(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 !