Masquer le texte dès l'affichage de la page

Fermé

Aaymeric Messages postés 78 Date d'inscription jeudi 29 septembre 2011 Statut Membre Dernière intervention 7 octobre 2018 - 7 oct. 2018 à 13:06
Aaymeric - 11 oct. 2018 à 18:39

Bonjour tout le monde,

Je souhaite afficher/masquer des div selon des boutons. Ne m'y connaissant absolument pas en javascript/jquery, j'ai trouvé un script qui me plait beaucoup mais je souhaite masquer les 4 div dès l'affichage de la page. Je vous montre le code:


<div class="buttons">
<button  id="showall">All</a>
<button  class="showSingle" target="1">Div 1</button>
<button  class="showSingle" target="2">Div 2</button>
<button  class="showSingle" target="3">Div 3</button>
<button  class="showSingle" target="4">Div 4</button>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>


jQuery(function(){
         jQuery('#showall').click(function(){
               jQuery('.targetDiv').show();
        });
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+jQuery(this).attr('target')).show();
        });
});

A voir également:

Masquer le texte dès l'affichage de la page
Supprimer une page word - Guide
Word numéro de page 1/2 - Guide
Traduire la page - Guide
Excel cellule couleur si condition texte - Guide
Gertrude a préparé la liste des affaires à prendre pour l'excursion. juliette a modifié cette liste en utilisant le mode suivi des modifications proposé par le traitement de texte. - Guide

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38273 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 novembre 2024 4 696
7 oct. 2018 à 14:39

Bonjour
Tu les mets en style display: none directement dans ton html.

Aaymeric Messages postés 78 Date d'inscription jeudi 29 septembre 2011 Statut Membre Dernière intervention 7 octobre 2018
7 oct. 2018 à 14:45

J'avais déjà fait ca mais quand j'appuie sur mes boutons les div ne s'affichent plus ... Je crois qu'il y a des lignes a rajouter dans le javascript mais je ne connais pas ce langage ..

jordane45 Messages postés 38273 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 novembre 2024 4 696 > Aaymeric Messages postés 78 Date d'inscription jeudi 29 septembre 2011 Statut Membre Dernière intervention 7 octobre 2018
7 oct. 2018 à 18:20

Non il n'y a rien à ajouter
Qu'avais tu écrit comme code exactement ?

jordane45 Messages postés 38273 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 6 novembre 2024 4 696
7 oct. 2018 à 18:21

Bien sûr, une autre solution est d'ajouter la ligne de code suivante à la fin de ton js


jQuery('.targetDiv').hide();

Réponse 2 / 3

colasoma
7 oct. 2018 à 14:53

Salut,
tout autant que JavaScript (

JQuery

étant une 'extension' de JavaScript) c'est HTML et CSS que vous devez connaître. De préférence sur le bout des doigts, c'est assez simple car pas du tout un langage de programmation.

Explication de code:
Par le préfixe

jQuery

vous faites appel à la bibliothèque en question chargée par votre page HTML. Notez qu'on peut le remplacer par le symbole '$' ce qui évite de taper beaucoup de lettres.

Ensuite entre les parenthèses vous avez un sélecteur (cela peut être autre chose mais ici c'est un sélecteur).

Le sélecteur

 jQuery

est assez puissant puisqu'il permet de raccourcir l'écriture JavaScript complète.
Dans le cas de votre code le sélecteur fait référence à une classe ou ID CSS, donc incluse dans la balise HTML concernée. Comme on peut voir ici:

<button class="showSingle" target="1">Div 1</button>
<!--- DONC quand on écrit dans le script:
$(' .showSingle') 
//-- cela revient à donne moi toutes les balises HTML avec la classe 'showSingle' 
//--  notez la présence des guillemets simples(apostrophes) qui indiquent une chaîne de caractères
//--  le point '.' devant le nom indique lui que c'est une classe qui est appelée

//-- même chose mais avec le symbole dièse à la place du point:
JQuery('#showall')
//--symbole dièse (#) au lieu d'un point veut simplement dire que l'on fait appel à une id
//-- la différence entre class et id est une des bases du CSS, la syntaxe . ou # reste familière

colasoma
7 oct. 2018 à 14:53

Bien une fois sélectionné un élement de la page on peut lui donner des instructions(ou fonctions).


//---
jQuery('#showall').click(function(){
//-- contenu de la fonction 'personalisée'
})
//-- l'accolade fermante indique la fin de l'instruction ou série d'instructions(plusieurs 'lignes') = fonction
//-- la parenthèse fermante elle indique la fin de l'instruction correspondant à la fonction .clic de Jquery

//-- Ici on fait appel au sélecteur JQuery pour utiliser la balise comportant l'id 'showall'
//-- puis le point suivant (chaînage de fonction) précéde le mot 'click'
//-- click est une fonction Jquery correspondant en gros à: quand l'utilisateur clique sur... 
//-- le chaînage (avec le "." ) indique que tout est ensemble, plus précisément applique le click au sélecteur
//-- puis vient une nouvelle parenthèse qui termine la fonction clic

Voilà avez ceci vous devriez pouvoir faire tout ce que vous avez demandé. Sinon il ne vous reste qu'à vous plonger dans HTML, CSS puis JavaScript qui permet de commander tout ça.

colasoma
Modifié le 7 oct. 2018 à 14:59

"...dans le JavaScript mais je ne connais pas ce langage .. "
Apprenez alors ;)
https://www.w3schools.com/js/default.asp

Dit ceci:

JavaScript is the programming language of HTML and the Web.

JavaScript is easy to learn.

This tutorial will teach you JavaScript from basic to advanced.

Des cours et tutos français existent aussi mais le site que je cite est très bien fait pour cela et aussi fait par le consortium web. Il vaut mieux parler à dieu qu'à ses ministres comme disait l'autre.

Réponse 3 / 3

Aaymeric
11 oct. 2018 à 18:39

Merci Colasoma pour tes explications et ton approche tres pédagagique, j'apprécie :)

Désolé de ne répondre que maintenant, j'étais assez occupé :)

Je vais regarder, sur le lien que tu m'as donné, la suite des explications pour le reste du code.

Bonne soirée ! (journée, week-end :))

Discussions similaires

[référencement] Ne pas être référencé

Chemin Logo du site de la Cité de l'espace

Formule Excel : "SI" une cellule contient un mot, alors ?