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

**argon** · 04/05/2008, 21h04

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 +

**Erwan31** · 04/05/2008, 21h34

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**argon** · 08/05/2008, 11h41

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 +

**argon** · 20/05/2008, 00h25

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 +

**Auteur** · 20/05/2008, 00h57

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**argon** · 21/05/2008, 12h22

Bonjour

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

Merci

Cordialement

**SpaceFrog** · 21/05/2008, 12h46

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

**Auteur** · 21/05/2008, 13h02

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 htm :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**argon** · 23/05/2008, 11h52

Bonjour tout le monde

Ca fonctionne, merci de votre patience.

A bientôt

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

JavaScript

Discussions similaires

Partager

Partager