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