11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Changer de texte au clic de la div

Bonjour à tous Smiley smile

J'essaie de produire l'effet cité dans le titre, à savoir, lorsque je clique sur une div, le texte change. J'ai trouvé le code qu'il me faut, du moins celui qui correspond visuellement à ce que j'imagine :

<body>
	<div id="1">
		<img src="http://data.imagup.com/2/1105095357.gif" width="25" height="15" onclick="affiche_text('mon texte 1');"/>Fr 
		<img src="http://data.imagup.com/2/1105095400.gif" width="25" height="15" onclick="affiche_text('mon texte 2');"/>All
	</div>
	<div id="2">
		A
	</div>
</body>


<script language="JavaScript">

	function affiche_text(text){
		document.getElementById("2").innerHTML = text;
	}

</script>


Le truc, c'est que j'aimerai porter l'expérience sur 3 onglets (sur mon site, il y a les onglets "Formation", "Certifications" et "Expérience", et chacun des trois onglets correspondent à trois contenus différents. Lorsqu'on clique sur l'onglet, on tombe sur le contenu approprié) J'aimerai rajouter une div à ce code qui répond à mon besoin. J'ai essayé naïvement de copier et de changer le nom de la DIV dans le code Javascript mais évidemment ça n'a pas marché Smiley ravi ! (L'espoir fait vivre). Je ne touche pas du tout (encore) au Javascript donc c'est un peu flou pour moi.

Auriez-vous des pistes à m'indiquer afin de pouvoir réaliser cela?

Merci d'avance Smiley smile Smiley smile
Modifié par yourkaribbean (08 Feb 2016 - 16:35)
Bonjour,

Je suis à l'aise en jQuery mais pas du tout en javascript pur...

Voici donc un exemple fonctionnel mais très sale, car le js mériterais d'être factorisé : CodePen.
Merci du retour rapide, ça marche très bien une fois adapté à ma situation Smiley smile

Je voulais savoir si il existait un équivalent du getElementById mais pour utiliser une class et comment l'utilise t-on?

Merci d'avance Smiley smile

Edit : @JENCAL, en fait ce que je cherchais c'est ce qu'a fait exactement Olivier C, a savoir avoir le même effet, mais avec 3 onglets correspondant à 3 textes différents
Modifié par yourkaribbean (09 Feb 2016 - 10:29)
Modérateur
yourkaribbean a écrit :
Je voulais savoir si il existait un équivalent du getElementById mais pour utiliser une class et comment l'utilise t-on?

yep : getElementsByClassName(), il s'utilise un peu comme le getElementById() mais il retourne un tableau d’élément il me semble.
exact il te retourne un tableau getElementsByClassName

tu dois par exemple faire un

document. getElementsByClassName('taclass')[0]..... pour ciblé le premier élément portant la classe name
Je reviens vers vous car j'ai essayé d'insérer dans les <p id="item-info1"> des <h1>, et d'autres div afin de structurer mon contenu. Malheureusement ça ne fonctionne, cela désactive l'effet.

Est-ce qu'il y a un moyen de styliser l'effet?
Je reviens vers vous car j'ai un petit soucis lorsque je met mon contenu dans le script : Il y a le contenu de mon deuxième item qui apparait dans le premier ... Par contre quand je clique sur l'onglet où est censé apparaître le contenu deuxième onglet, l'effet se produit bien, et lorsque je reviens sur le premier, le contenu en question disparait.

Voici un lien Codepen pour visualiser l'effet : http://codepen.io/yourkaribbean/pen/zryvBp
Ce qui est curieux, c'est que item-infos3 tu la mis dans une balise <p> (qui porte un display:none) et item-infos2 tu la mis dans une <div> (qui ne porte pas de display:none) voici le pourquoi on voit l'item info 2 lors du chargement de la page, ensuite tu pourrais mettre directement un evenement onclick dans la balise <li>, ce qui visuellement parlant rendrais le JS plus lisible.

j'ai mofidier un peu à toi de voir si tu garde ou pas, si tu modifie ou pas. J'ai mis trois <div> au lieu de deux <div> + un <p>. j'ai modifier donc le css : 
.description p {
  display: none;
}

devient ->
.description div:not(:first-child) {
  display: none;
}

J'ai également épuré le JS.

http://codepen.io/anon/pen/obJbvv
Modifié par JENCAL (10 Feb 2016 - 14:12)
En fait, sur le codepen je n'avais pas modifié la troisième partie, mais le souci se produisait aussi avec le item-infos3 en <div>.

J'ai jeté un coup d’œil à ton codepen et il y a quelques soucis, par exemple, le contenu de la div school n’apparaît pas, et dans les contenus des items, lorsque je met la moindre balise du genre </br>, il n'y a rien qui apparaît.
Modifié par yourkaribbean (10 Feb 2016 - 14:33)
Quel est l'élément à modifier dans le css pour le problème de la div school?

Sinon pour l'histoire du </br> ça a l'air de fonctionner maintenant Smiley smile

EDIT: C'est bon en fait, j'ai trouvé, merci de ton aide ! Smiley smile
Modifié par yourkaribbean (10 Feb 2016 - 15:34)
yourkaribbean a écrit :
Quel est l'élément à modifier dans le css pour le problème de la div school?


Il fallait simplement ciblé la classe pour le not first child plutot que le type de balise.
Sujet clos
Aller à