Bonjour ,
Je viens vers vous car je ne sais plus quoi faire . Je suis débutante en JavaScript et mon problème est le suivant :
J'aimerai qu'après le click d'un des mes trois bouton, un texte s'affiche. Lors de l'appui du second, le premier disparaisse pour laisser place à un deuxième texte dans la même DIV... etc.
J'ai tout d'abord testé qu'avec du HTML et CSS mais je n'ai pas réussi alors je me suis lancé dans du Java ( car cela me semblait plus abordable étant donné que j'ai déjà travailler avec du python ) mais je n'y vois pas très bien .
D'abord, avec mon code, tous les texte apparaissent en même temps alors que j'aimerai qu'un seul s'affiche à la fois et ne se cache après le click d'un des autres boutons.
Et pour finir le tout, mes boutons sont bien opé mais, il me semble, ne sont relié à rien ..
Merci pour votre aide !
Modifié par nidii25 (09 Jan 2017 - 23:26)
Je viens vers vous car je ne sais plus quoi faire . Je suis débutante en JavaScript et mon problème est le suivant :
J'aimerai qu'après le click d'un des mes trois bouton, un texte s'affiche. Lors de l'appui du second, le premier disparaisse pour laisser place à un deuxième texte dans la même DIV... etc.
J'ai tout d'abord testé qu'avec du HTML et CSS mais je n'ai pas réussi alors je me suis lancé dans du Java ( car cela me semblait plus abordable étant donné que j'ai déjà travailler avec du python ) mais je n'y vois pas très bien .
D'abord, avec mon code, tous les texte apparaissent en même temps alors que j'aimerai qu'un seul s'affiche à la fois et ne se cache après le click d'un des autres boutons.
Et pour finir le tout, mes boutons sont bien opé mais, il me semble, ne sont relié à rien ..
Merci pour votre aide !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title>Accueil</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet">
<script type='text/javascript' src='../lib/prototype.js'></script>
</head>
<body>
<div class="limit_contenu_nous">
<hr class="hr_droite">
<h2> Pour tous les besoins </h2>
<hr class="hr_gauche">
<div class="boutons_trois_options">
<ul>
<li class="sous_bureau"><a href="#onglet_1"> Bureau </a>
</li>
<li class="sous_graphique"><a href="#onglet_2"> Graphique </a>
</li>
<li class="sous_tablettes"><a href="#onglet_3"> Tablettes </a>
</li>
</ul>
<div id="onglet_1" class="onglet">
<p> texte1 </p>
</div>
<div id="onglet_2" class="onglet">
<p> texte 3 </p>
</div>
<div id="onglet_3" class="onglet">
<p> texte 3 </p>
</div>
</div>
<section class="trois_options_contenu">
</section>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
<!--
// JavaScript Document
function setOnglet(id) {
$$('div.onglet').each( function(e) { e.hide(); } );
$(id).show();
document.location.replace('#'+id);
}
function handleButton(event) {
var e = Event.element(event);
Event.stop(event);
var current = e.href.split('#')[1];
setOnglet(current);
}
var current = document.location.href.split('#')[1] || 'onglet_1';
setOnglet(current);
$$('.onglet_buttons a').each( function(e) {
Event.observe(e, 'click', handleButton.bindAsEventListener(this));
});
//-->
</script>
Modifié par nidii25 (09 Jan 2017 - 23:26)
