Afficher un bloc via un id dans une div

Fermé
Max - 29 sept. 2017 à 11:41
 cyrano - 30 sept. 2017 à 05:09
Bonjour,

J'ai des difficultés dans la ceception d'un code JS pour afficher et masquer un bloc.

J'ai un menu dans un bloc gauche de mon ecran avec un id qui corresponds au bloc qui contient le même id que je souhaite afficher/masquer.
J'ai un bloc à droite où je vais afficher justement le contenu en fonction de texte sur lequel j'aurai cliquer dans le menu. De manière plus limpide en code cela donne :

<div class="col-md-12">
	<div class="sidebar-left">
		<div class="menu-left-print">
			<a href="#affiches" rel="nofollow noopener noreferrer" target="_blank"><p><i class="fa fa-hashtag" aria-hidden="true"></i> Affiches </p></a>
			<a href="#brochures" rel="nofollow noopener noreferrer" target="_blank"><p><i class="fa fa-hashtag" aria-hidden="true"></i> Brochures </p></a>
			<a href="#cartes-de-vistes" rel="nofollow noopener noreferrer" target="_blank"><p><i class="fa fa-hashtag" aria-hidden="true"></i> Cartes de visites</p></a>
		</div>
		<div id="slider">
		</div>
	</div>
	<div class="container-right">
		<div id="#affiches">
			blablabla
		</div>
		<div id="#brochures">
			blablabla
		</div>
		<div id="#cartes-de-visites">
			blablabla
		</div>
	</div>
</div>


Comment faire mon code js pour que cela m'affiche le bloc "#charte-graphique" quand je clique sur le texte "Charte graphique" dans le menu et ainsi de suite pour le reste ?

Merci de votre aide !!

1 réponse

Salut, déjà il y a un problème:

J'ai un menu dans un bloc gauche de mon ecran avec un id qui corresponds au bloc qui contient le même id que je souhaite afficher/masquer.

Une id étant censé être unique il ne peut avoir deux éléments avec la même id! Rien ne l'interdit (car id est un attribut HTML et HTML permet tout, même certaines erreurs peuvent ne pas l'être)mais en plus d'être source de confusion cela empêchera des fonctionnements normaux.

Bon l'id n'étant pas vraiment le même (ajout de # devant) je ne suis pas sûr que cela bloque. Que vous parliez de JavaScript et montrez de l'HTML est déjà un problème, qu'avez vous commencé à faire et qu'est ce qui bloque? Cela permettrais de mieux vous répondre non?

Bon commençons dans l'ordre. On va enlever les sources d'erreur de fonctionnement (ou au moins de confusion) et respecter une règle tacite d'avoir un code le plus explicite possible.

Déjà je constate que vous avez confondu ID et HREF (id pour identity (identité) en français et HREF pour HypertextReference)


<a href="#affiches" rel="nofollow noopener noreferrer" target="_blank">
bref c'est mal partit et à moins d'avoir un esprit très tordu et de vouloir se compliquer la vie votre JavaScript derrière ne pourra pas marcher!
(au passage là vous approchez de la façon de faire un lien dans la page, même s'il n'est pas correct mais en HTML ce qui n'a rien à voir avec JavaScript.
JS c'est de la programmation et HTML n'en est surtout pas.)

Revenons à nos moutons, ça devient:
Pour rappel le doctype HTML5
<doctype html><!-- carrément trop...simple et rapide XD-->

<!-- je garde le href=#affiches même si je voit pas vraiment à quoi il peut servir dans ce cotexte -->
<a href="#affiches" rel="nofollow noopener noreferrer" target="_blank" ID="lienaffiches">



voire même en HTML5 plus propre rapide et simple(comme tout HTML5) où on se passe des guillemets voire même d'un paquet de trucs superflus:

<a href=#affiches ID=lienaffiche rel=nofollow noopener noreferrer target=_blank>

ou plutôt
<a href=#affiches ID=lienaffiche rel='nofollow noopener noreferrer' target=_blank><!-- avec des guillemets quand il y a des espaces entre plusieurs valeurs , juste par sécurité même s'il ne devrait pas être nécessaire-->


Bon maintenant on est sur de bonnes bases.
Pour utiliser l'interactivité(donc la vrai pas un lien) il suffit de mettre un listener(écouteur en français) sur l’élément qui doit agir et d'indiquer son type(clic, survol, etc...). On peut utiliser n'importe quel élément , donc mieux vaut éviter d'utiliser un lien (balise <a>) qui est déjà prévu pour autre chose puisque qu'il méne où on indique(le fameux href comme référence hypertexte en français)

Ce ne sont que des explications pas le vrai code, je les mets en tant que code pour éviter probléme avec correcteur orthographique.
Rien de sorcier avec
element_qui_va_interagir.addEventListener( declencheur, instructions_lors_de_levenement, propagationaudessus_ou_pas);

Ce qui correspondrait ici :
lien_avec_id_lienaffiches.addEventListener('mouseover', function(){ /*ICI ON VA AFFICHER LE TEXTE QUE L'ON DECIDE DANS L'ENDROIT VOULUT*/}, false);
0
dans l'ordre, puisque que c'est l'id que vous avez décidé d'utiliser pour obtenir l'élément HTML auquel on(enfin le programme surtout) qui va avoir l'écouteur d'événement(listener) on va d'aborder le récupérer.

document.getElementById('lienaffiches');
/*//-- éventuellement pour réutiliser ou rendre plus lisible, sinon il suffit de chaîner comme indiqué dans les explication au dessus :*/

let lienselectionne= document.getElementById('lienaffiches');
 

Dans le corps de la fonction anonyme passée dans la fonction addEventListener on met les instructions du texte à afficher.
donc pareil que précédemment d'abord récupérer l'élément de la page en question(toujours par son id ce qui est le moyen le plus simple en général car pas besoin d'avoir à s'occuper des node et de l'arborescence associée.
let cible_texte_amodifier = document.getElementById('affiches');/*//-- comme précédemment on récup l'élément concernné, le mettre dans une variable avec let(ecma6) permet de le réutiliser et décomposer, ce n'est pas obligé et on peut chaîner ou observer les valeurs renvoyées (résultat) par la plupart des fonctions*/

/*Pour le contenu on peut utiliser simplement .innerHTML qui n'est pas une fonction mais marche plutôt comme l'appel à un objet interne*/
cible_texte_amodifier.innerHTML = 'voilou je modifie le texte contenu dans le div!';
//-- ou sans décomposer et fera la même chose en une ligne au lieu de 2

document.getElementById('affiches').innerHTML = 'voilou je modifie le texte contenu dans le div!';


Pour le dernier argument de la fonction addEventListener le plus souvent il vaut mieux mettre à false, indiquant que l’événement ne se répercutera à l'élément parent qui le contient jusqu'au body.

Ah oui sauf que comme j'ai dit plus haut on utilise une balise a, donc quand on clique il se passe quelque chose(et quand on survole aussi puisque la balise <a> se surligne par défaut.
Donc il faut soit arrêter le fonctionnement normal de a qui sinon risque(ou à coup sûr pour un clic) de remplacer l'événement que l'on veut déclencher soit ne pas utiliser une balise <a> qui n'est pas prévue pour ça puisque déjà prévue pour autre chose. Bienvenue dans la programmation événementielle :)) couplée au DOM.
Bien sûr je recommande simplement d'utiliser une autre balise qui n'a pas des comportements qui déclenche des événements et seront concurrents, cela évite d'avoir à faire du code en plus.

Sinon il suffit d'utiliser .stopPropagation() voire stopPropagationAll() qui comme son nom l'indique bloquera la propagation de l'événement déclenchée par le programme et empêchera celui ci.
Donc mieux vaut éviter d'utiliser <a> pour un clic interne à la page,
<button type=button>je suis un boutton</button> 
est parfaitement adapté à cela(sans oublier que la syntaxe HTML utilise 2 balises et de définir type = button. On peut bien sûr utiliser n'importe quel type de balise comme un div. Au fait les div ne doivent plus être utilisés pour l'utilisation que vous en faites, c'est une autre histoire avec section et article, eux ont une valeur sémantiques que les moteurs de recherches peuvent utilisés, div n'en a aucune et sert à définir un élément de page isolé du reste et sans définition précise(donc servent pas souvent , sauf pour éventuellement faire des bouttons scriptés avec JavaScript ;) . L'avantage d'utiliser un bouton lui c'est de pouvoir passer une valeur par l'attribut value et bien sûr de se faire connaître en tant que bouton lors du référencement(en plus d'avoir une apparence de bouton toute prête à utiliser et que les navigateurs mobiles comme navigateurs d'ordi donnent déjà une apparence sans le moindre CSS). Quand aux liens hypertextes, bien ils servent surtout à relier 2 éléments sans avoir à mettre la moindre programmation et ont nativement(à leur création sur la page) des aspects indiquant les état associés(survol, visités, clic..) et tout ça dans le but d'aider et rendre clair à l'utilisateur ce qu'il a devant lui+le référencement, restons sur ce bon principe.
0
Plutôt simple non? Mais bon encore faudrait il que vous soyez parti sur des bonnes bases et que votre JavaScript ressemble à ça, voire que vous ayez commencé par vous même à écrire quelque chose.
Si je vous faisait tout ça s'appelle un métier et j'ai beau pas être cher je fais payer!
L'entraide c'est bien (quoique là c'est plutôt ne formation et là aussi je fais payer , même plus cher que le développement en taux horaire) alors j'espère que vous allez vous sortir les doigts maintenant que vous avez presque tout sur un plateau.

Oui presque car quand on utilise un outil le plus efficace et rapide c'est regarder la documentation pour apprendre à l'utiliser.

Bon je suis pas cher en ce moment:

voici la doc ou vous pouvez rechercher toutes les fonctions et autres récurrences et banalités(fut un temps on disait même routine mais la programmation était plus à l'âge de pierre et les routines ont pas grand chose à voir) de JavaScript:
.
https://www.w3schools.com/JSREF/met_document_addeventlistener.asp

Chez Mozilla ils ont aussi une bonne doc et en français, mais moins claire et moins officielle.
0