fonctionnement des onglets

**argon** · 12/05/2009, 10h13

Bonjour tout le monde

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

Mon code css

Code :

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

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

Mon code html

Code :

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

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 :

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
 
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 +

**SpaceFrog** · 12/05/2009, 10h22

leur attribuer un css par defaut ?

**argon** · 12/05/2009, 10h29

Je ne comprends pas ta question SpaceFrog.

**SpaceFrog** · 12/05/2009, 10h31

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 ...

**argon** · 12/05/2009, 10h35

Jai mis

Code :

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

1
2
 
<body onload="javascript:afficheCible('cible1');">

Pour qu'il s'affiche à l'ouverture

**franculo_caoulene** · 12/05/2009, 10h52

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 :

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
<!-- 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>

**SpaceFrog** · 12/05/2009, 10h56

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 ...

**argon** · 19/05/2009, 21h40

Bonsoir tout le monde

Fichier css:

Code :

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

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

fichier js:

Code :

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

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
 
<?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+

fonctionnement des onglets

JavaScript

Discussions similaires

Partager

Partager