création de 3 liens qui affichent 3 textes différents.

Version imprimable

04/05/2008, 20h04
argon

création de 3 liens qui affichent 3 textes différents.

Bonsoir tout le monde

Je souhaite réaliser 3 liens qui affichent 3 textes différents.

Exemple:

Si on clique sur le lien 1, on affichera un texte si on clique sur un autre, se sera un autre texte qui sera affiché.

Est ce que c'est possible?

Merci

A +

Bonjour,
oui c'est possible en Javascript avec cette fonction:
Code:

1 2 3 4 function toggle (idDetail) { var style = document.getElementById(idDetail).style; style.display = (style.display == "none") ? "" : "none"; }
et pour le (x)HTML:
Code:

1 2 3 4 <a href="texte1.php" onclick="toggle('id_cible'); return false;">Lien 1</a> <p id="id_cible" style="display:none">texte1</p> <a href="texte2.php" onclick="toggle('id_cible2'); return false;">Lien 2</a> <p id="id_cible2" style="display:none">texte2</p>
Sachant que l'équivalent clavier (évènement onkeypress) n'est pas nécessaire.
Il faudra créer une page (ici texte1.php) qui contient le texte.
Dans le cas ou l'utilisateur n'a pas Javascript, cette page sera affichée.
Le return False évite que l'évènement onclick se propage et déclenche le lien hypertexte.

08/05/2008, 10h41
argon

Bonjour tout le monde

Ca fonctionne, mais j'ai deux questions.

1)

Comment faire pour que les autre texte n'affiche pas, pendant que l'un est affiché?

2)

Je souhaite afficher le texte 1 à l'ouverture de la page?

Merci

A +
19/05/2008, 23h25
argon

Bonsoir tout le monde

Je pense qu'il faut modifier la fonction mais je ne vois pas comment.

Je vais essayer de voir sur google.

A +

un truc tout simple :
1- Cacher tous les éléments à l'ouverture de la page
2- Afficher l'élément ciblé lors du clic sur le lien
3- Mémoriser cet élément
Lors d'un nouveau clic :
4- cacher l'élément précédent
5- Afficher le nouvel élément (et recommencer à partir de l'étape 3)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<html>
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 
<style type="text/css">
<!--
.lesCibles{
  display: none;
  height: 100px;
  width: 200px;
  border: #AAAAAA 2px inset;
}
-->
</style>
 
 
<script type="text/javascript">
<!--
var ciblePrec = null;
function afficheCible(cible)
{
  if (ciblePrec!=null)
    document.getElementById(ciblePrec).style.display = "none";
    
  document.getElementById(cible).style.display = "block";
  ciblePrec = cible;
}
//-->
</script>
 
</head>
 
<body>
 
<div>
<a href="javascript:afficheCible('cible1')">cible 1</a> 
<a href="javascript:afficheCible('cible2')">cible 2</a>
<a href="javascript:afficheCible('cible3')">cible 3</a>
<br /><br /><br />
</div>
 
<div id="cible1" class="lesCibles">
contenu de la cible 1
</div>
<div id="cible2" class="lesCibles">
contenu de la cible 2
</div>
<div id="cible3" class="lesCibles">
contenu de la cible 3
</div>
 
</body>
 
</html>

21/05/2008, 11h22
argon

Bonjour

Comment faire pourque l'un des liens s'affiche à ouverture de la page.

Merci

Cordialement
21/05/2008, 11h46
SpaceFrog

Sinon y'avait dans les contributions le post sur "FORM DYNAMIQUE mais pas que form"

Citation:

Envoyé par argon

Bonjour

Comment faire pourque l'un des liens s'affiche à ouverture de la page.

Merci

Cordialement

appelle la fonction afficheCible() dans l'événement onload

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<html>
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 
<style type="text/css">
<!--
.lesCibles{
  display: none;
  height: 100px;
  width: 200px;
  border: #AAAAAA 2px inset;
}
-->
</style>
 
 
<script type="text/javascript">
<!--
var ciblePrec = null;
function afficheCible(cible)
{
  if (ciblePrec!=null)
    document.getElementById(ciblePrec).style.display = "none";
 
  document.getElementById(cible).style.display = "block";
  ciblePrec = cible;
}
//-->
</script>
 
</head>
 
<body onload="afficheCible('cible1')">
 
<div>
<a href="javascript:afficheCible('cible1')">cible 1</a> 
<a href="javascript:afficheCible('cible2')">cible 2</a>
<a href="javascript:afficheCible('cible3')">cible 3</a>
<br /><br /><br />
</div>
 
<div id="cible1" class="lesCibles">
contenu de la cible 1
</div>
<div id="cible2" class="lesCibles">
contenu de la cible 2
</div>
<div id="cible3" class="lesCibles">
contenu de la cible 3
</div>
 
</body>
 
</html>

23/05/2008, 10h52
argon

Bonjour tout le monde

Ca fonctionne, merci de votre patience.

A bientôt