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

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

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, 20h34

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, 10h41

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** · 19/05/2008, 23h25

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** · 19/05/2008, 23h57

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, 11h22

Bonjour

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

Merci

Cordialement

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

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

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

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, 10h52

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