[RESOLU] Onglets en javascript

par **Fantole** » 28 sept. 2014, 23:13

Je t'en prie, contant d'avoir pu aider.

Et en effet à la force d'avoir le nez dessus on ne voit plus les erreurs.
Sa m'arrive parfois

par **skywhi** » 28 sept. 2014, 15:53

Merci beaucoup Fantole! Parfois quand on a trop le nez dessus, on n'y voit plus rien! Mon problème est résolu.

par **Fantole** » 28 sept. 2014, 01:35

Bonjour

Je ne connais pas grand chose au Javascript mais j'ai pu voir quelques erreurs :

Tu as ce code qui définit ta 2ème fonction

<script type="text/javascript">
//<!--
function change_onglet2(name)
{
document.getElementById('onglet2_'+anc_onglet2).className = 'onglet_02 onglet2';
document.getElementById('onglet2_'+name).className = 'onglet_12 onglet2';
document.getElementById('contenu_onglet2_'+anc_onglet2).style.display = 'none';
document.getElementById('contenu_onglet2_'+name).style.display = 'block';    
anc_onglet2 = name;          
}
//-->
</script>

Plus bas tu utilise cette fonction comme ceci

<span class="onglet_02 onglet2" id="onglet_quoi2" onclick="javascript&#058;change_onglet2('quoi2');">Journée</span>
<span class="onglet_02 onglet2" id="onglet_qui2" onclick="javascript&#058;change_onglet2('qui2');">Saison</span>

onglet_qui2 devrait être onglet2_qui2

Car tu as fait

document.getElementById('onglet2_'+name).className = 'onglet_12 onglet2';

Et non

document.getElementById('onglet_'+name).className = 'onglet_12 onglet2';

Pareil avec quoi

Pareil contenu_onglet_qui2 devrait être contenu2_onglet_qui2

Voici le code retouché.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un syst&egrave;me d'onglet en javascript</title>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';    
anc_onglet = name;          
}
//-->
</script>

<script type="text/javascript">
//<!--
function change_onglet2(name)
{
document.getElementById('onglet2_'+anc_onglet2).className = 'onglet_02 onglet2';
document.getElementById('onglet2_'+name).className = 'onglet_12 onglet2';
document.getElementById('contenu_onglet2_'+anc_onglet2).style.display = 'none';
document.getElementById('contenu_onglet2_'+name).style.display = 'block';    
anc_onglet2 = name;          
}
//-->
</script>

<style type="text/css">       
.onglet
{
display:inline-block;
margin-right:-5px;
padding:3px 18px;
border:1px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
width: 150px;
} 
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h3
{
margin:0px;
padding:0px;
}

.onglet2
{
display:inline-block;
margin-right:-5px;
padding:3px 18px;
border:1px solid black;
cursor:pointer;
}
.onglet_02
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_12
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet2
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
width: 150px;
} 

</style>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript&#058;change_onglet('quoi');">Journée</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript&#058;change_onglet('qui');">Saison</span>

</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h3>Onglet 1</h3>
<img src="julien.png" alt=""/><br />
Julien
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h3>Onglet 2</h3>
C'est un script de TEST<br />
TEST
</div>

</div>
</div>

<script type="text/javascript">
//<!--
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
//-->
</script>



 <br/>

<div class="systeme_onglets2">
<div class="onglets2">
<span class="onglet_02 onglet2" id="onglet2_quoi2" onclick="javascript&#058;change_onglet2('quoi2');">Journée</span>
<span class="onglet_02 onglet2" id="onglet2_qui2" onclick="javascript&#058;change_onglet2('qui2');">Saison</span>

</div>
<div class="contenu_onglets2">
<div class="contenu_onglet2" id="contenu_onglet2_quoi2">
<h3>Onglet 1</h3>
<img src="julien.png" alt=""/><br />
Julien
</div>
<div class="contenu_onglet2" id="contenu_onglet2_qui2">
<h3>Onglet 2</h3>
C'est un script de TEST<br />
TEST
</div>

</div>
</div>

<script type="text/javascript">
//<!--
var anc_onglet2 = 'quoi2';
change_onglet2(anc_onglet2);
//-->
</script>






</body>
</html>

par **skywhi** » 25 sept. 2014, 17:25

Bonjour à tous!
J'ai récupéré un petit bout de code sur internet pour créer un div avec une navigation en onglets. Jusque là tout va bien. Seulement, je souhaite "dupliquer" ce code pour afficher un autre div à côté du premier, qui lui aussi posséderait une navigation en onglets. Et c'est là que ça coince, j'obtiens un bug étrange. Je ne comprend pas où est le soucis.

Voici mon code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un syst&egrave;me d'onglet en javascript</title>
<script type="text/javascript">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';    
anc_onglet = name;          
}
//-->
</script>

<script type="text/javascript">
//<!--
function change_onglet2(name)
{
document.getElementById('onglet2_'+anc_onglet2).className = 'onglet_02 onglet2';
document.getElementById('onglet2_'+name).className = 'onglet_12 onglet2';
document.getElementById('contenu_onglet2_'+anc_onglet2).style.display = 'none';
document.getElementById('contenu_onglet2_'+name).style.display = 'block';    
anc_onglet2 = name;          
}
//-->
</script>

<style type="text/css">       
.onglet
{
display:inline-block;
margin-right:-5px;
padding:3px 18px;
border:1px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
width: 150px;
} 
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h3
{
margin:0px;
padding:0px;
}

.onglet2
{
display:inline-block;
margin-right:-5px;
padding:3px 18px;
border:1px solid black;
cursor:pointer;
}
.onglet_02
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_12
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet2
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
width: 150px;
} 

</style>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Journée</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Saison</span>

</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h3>Onglet 1</h3>
<img src="julien.png" alt=""/><br />
Julien
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h3>Onglet 2</h3>
C'est un script de TEST<br />
TEST
</div>

</div>
</div>

<script type="text/javascript">
//<!--
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
//-->
</script>



 <br/>

<div class="systeme_onglets2">
<div class="onglets2">
<span class="onglet_02 onglet2" id="onglet_quoi2" onclick="javascript:change_onglet2('quoi2');">Journée</span>
<span class="onglet_02 onglet2" id="onglet_qui2" onclick="javascript:change_onglet2('qui2');">Saison</span>

</div>
<div class="contenu_onglets2">
<div class="contenu_onglet2" id="contenu_onglet_quoi2">
<h3>Onglet 1</h3>
<img src="julien.png" alt=""/><br />
Julien
</div>
<div class="contenu_onglet2" id="contenu_onglet_qui2">
<h3>Onglet 2</h3>
C'est un script de TEST<br />
TEST
</div>

</div>
</div>

<script type="text/javascript">
//<!--
var anc_onglet2 = 'quoi2';
change_onglet2(anc_onglet2);
//-->
</script>






</body>
</html>

Merci d'avance pour votre aide!

[RESOLU] Onglets en javascript

Répondre

Étendre la vue Revue du sujet : [RESOLU] Onglets en javascript

Re: [RESOLU] Onglets en javascript

Re: Onglets en javascript

Re: Onglets en javascript

Onglets en javascript