fonctionnement des onglets

Version imprimable

Bonjour tout le monde

J'essais de réaliser des onglets simple dans mon site

Mon code css

Code:

1
2
3
4
5
6
7
8
9
 
<style type="text/css">
<!--
.lesCibles{
  display: none;
  height: 800px;
  width: 800px;
 
}

Mon code html

Code:

1
2
3
4
5
6
7
8
 
 
<ul>
	 <li><a href="javascript:afficheCible('cible1')">Enregistrer</a></li>
	<li><a href="javascript:afficheCible('cible2')">Afficher</a></li>
	  <li><a href="javascript:afficheCible('cible3')">Validation</a></li>
	 <li><a href="javascript:afficheCible('cible4')">outils</a></li>
</ul>

Mon code javascript

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
 
var ciblePrec = null;
 
 
 
        function afficheCible(cible)
        {
 
 
 
  if (ciblePrec!=null)
 
 
    document.getElementById(ciblePrec).style.display = "none";
 
 
 
  document.getElementById(cible).style.display = "block";
 
 
 
 
  ciblePrec = cible;
       }

Mon soucis est que tout les onglets s'affichent à l'ouverture de la page.

Comment régler ce problème?

Merci

A +

12/05/2009, 10h22
SpaceFrog

leur attribuer un css par defaut ?
12/05/2009, 10h29
argon

Je ne comprends pas ta question SpaceFrog.
12/05/2009, 10h31
SpaceFrog

je ne comprends pas ta réponse ...

Je disais juste que si au démarrage tu n'as pas attribué de style aux onglets, par exemple quel est celui qui doit être affiche par défaut et quels sont ceux qui doivent être masqués ...
12/05/2009, 10h35
argon
Jai mis
Code:

1 2 <body onload="javascript:afficheCible('cible1');">
Pour qu'il s'affiche à l'ouverture

Salut,

Et si tu nous postais un code complet, mais simplifié qu'on puisse tester ton code par un simple copier/coller. Un code ressemblant à ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- doctype à placer ici -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <title>test (x)html</title>
   <style type="text/css">
   /* code css à placer ici */
   </style>
</head>
<body>
   <!-- code (x)html à placer ici -->
   <script type="text/javascript">
    /* code javascript à placer ici */
   </script>
</body>
</html>

12/05/2009, 10h56
SpaceFrog

il me semble sous IE que si il n'y a pas de display par defaut dasn l'objet la première attribution dynamique passe à l'as ...

Bonsoir tout le monde

Fichier css:

Code:

1
2
3
4
5
6
7
8
9
 
@charset "windows-1252";
 
.lesCibles{
  display: none;
  height: 180px;
  width: 800px;
 
}

fichier js:

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
 
var ciblePrec = null;
 
 
 
        function afficheCible(cible)
        {
 
 
 
  if (ciblePrec!=null)
 
 
    document.getElementById(ciblePrec).style.display = "none";
 
 
 
  document.getElementById(cible).style.display = "block";
 
 
 
 
  ciblePrec = cible;
       }

fichier html

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
 
<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Date de création: 02/04/2009 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>test onglet</title>	
 
<SCRIPT type="text/javascript" SRC="./script/js.js"></SCRIPT>
 
<link rel="StyleSheet" type="text/css" href="./css/cible.css">
 
 
<body onload="javascript:afficheCible('cible1');">
 
 <ul>
			 	 <li><a href="javascript:afficheCible('cible1')">Enregistrer</a></li>
				 <li><a href="javascript:afficheCible('cible2')">Afficher</a></li>
				 <li><a href="javascript:afficheCible('cible3')">Validation</a></li>
				 <li><a href="javascript:afficheCible('cible4')">outils</a></li>
</ul>
 
<p id="cible1" class="lesCibles">
 
cible 1
</p>
 
 
 
<p id="cible2" class="lesCibles">
 
cible 2
</p>
 
 
 
<p id="cible3" class="lesCibles">
 
cible 3
</p>
 
 
 
 
<p id="cible4" class="lesCibles">
 
cible 4
</p>
 
 
 
</body>
</html>

Ca fonctionne sous ie 6 et ie 7, mais sous ie 8 et Mozilla Firefox ca ne fonctionne pas.

Que dois je modifier pour que ca fonctionne sous ie8 et Mozilla Firefox?

A+