à la fin de ta page tu as un script
1
2
3
4
5
| var anc_onglet = 'profile';
change_onglet(anc_onglet);
var anc_onglet2 = 'recherche';
change_onglet(anc_onglet2); |
or dans cette version la fonction change_onglet prends 2 params
je suppose que tu voulais faire
1
2
3
| var anc_onglet = 'profile';
var anc_onglet2 = 'recherche';
change_onglet(anc_onglet, anc_onglet2); |
mais même en faisant ça ça ne peux pas marcher
en effet à la ligne
document.getElementById('onglet_'+anc_onglet2).className = 'onglet_0 onglet';
lors du premier appel tu cherche onglet_recherche or cet element n'existe pas dans ta page.
Je te déconseille de mettre des script comme ça dans ta page. le mieux est de mettre les script js dans un fichier js et de les charger dans le head de ta page.
pour que ton script s'exécute lorsque tous les éléments de la page sont crées il suffit d'utiliser window.onloadje ne comprends toujours pas la raison de la présence des deux fonction même si tu a réuni le corps dans une seule.
seul div pour chaque onglet contenant ce que tu veux est largement sufisant.
je n'ai pas géré tes style car je n'ai pas la feuille
mais
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title>Rencontres</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function change_onglet(name, name2)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_'+name).style.display = 'block';
anc_onglet = name;
}
window.onload = function(e){
anc_onglet = 'profile';
change_onglet(anc_onglet);
}
</script>
<style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border-bottom:0px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:0px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border-bottom:0px solid black;
margin-top:-1px;
padding:5px;
display:none;
float:left;
}
.2contenu_onglet
{
background-color:#dddddd;
border-bottom:0px solid black;
margin-top:-1px;
padding:5px;
display:none;
float:right;
}
</style>
-----
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_profile" onclick="change_onglet('profile');">profile</span>
<span class="onglet_0 onglet" id="onglet_messagerie" onclick="change_onglet('messagerie');">messagerie</span>
<span class="onglet_0 onglet" id="onglet_profile2" onclick="change_onglet('profile2');">options</span>
</div>
<br>
<div id="contenu_profile" style="display:block">
<div>
ONGLET 1 proflie
</div>
<br>
<div>
ONGLET 1 recherche
</div>
</div>
<div id="contenu_messagerie" style="display:none">
<div>
ONGLET 2 messagerie
</div><br>
<div>
ONGLET 2 messagerie2
</div>
</div>
<div id="contenu_profile2" style="display:none">
<div>
ONGLET 3 profile
</div>
<br>
<div>
ONGLET 3 options
</div>
</div>
</body>
</html> |
le principal problème dans ton dev est la multiplication non maitrisé des ids tu as des ids partout sans règle de nommage claire du coup pour certains éléments le spam et les deux div on des ids similaire et pour d'autres non
deplus tu as deux élément avec le même id or il id est unique.
le simple fait de mettre les deux contenus dans un seul div te permets de l'afficher ou le cacher sans problème.
A+JYT
Onclick : changer le contenu par une variable
Répondre avec citation
Partager