JScript : boîte à onglets sous IE
Résolu/Fermé
Bertrand40
Messages postés
1196
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
-
28 janv. 2010 à 21:50
Bertrand40 Messages postés 1196 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 - 1 févr. 2010 à 22:05
Bertrand40 Messages postés 1196 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 - 1 févr. 2010 à 22:05
1 réponse
Bertrand40
Messages postés
1196
Date d'inscription
vendredi 27 mars 2009
Statut
Membre
Dernière intervention
27 février 2023
193
1 févr. 2010 à 22:05
1 févr. 2010 à 22:05
Certainement pas très beau mais ça fonctionne et pour l'instant je ne vois une logique que là-dedans. Un jour ça changera complètement.
<div id="contenant">
<dl>
<dt name="puce" id="puce" style="background: #e3ff87;">
<a href="javascript:afficheronglet(0)">Titre onglet 1</a>
<dd style="display: block; ">
Texte page 1
</dd
</dt>
<dt name="puce" id="puce">
<a href="javascript:afficheronglet(1)">Titre onglet 2</a>
<dd style="display: none; ">
Texte page 2
</dd>
</dt>
</dl>
</div>
function afficheronglet(n)
{
var etat = document.getElementsByTagName("dd");
var fond = document.getElementsByName("puce");
var nbre = etat.length;
for (j = 0; j < nbre; j++)
{
if (etat[n].style.display != etat[j].style.display)
{
etat[n].style.display = "block";
fond[n].style.background = "#e3ff87";
etat[j].style.display = "none";
fond[j].style.background = "none";
}
}
}
#contenant
{
position: absolute;
margin: 0;
width: 770px;
height: auto;
}
#contenant dl
{
list-style-type: none;
padding: 6px 0 4px 0;
}
#contenant dt
{
display: inline;
margin: 0 3px 0 0;
padding: 3px;
border: 1px solid;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
#contenant dd
{
position: absolute;
left: 0;
top: 40px;
width: 100%;
margin: 0;
padding: 5px;
}
<div id="contenant">
<dl>
<dt name="puce" id="puce" style="background: #e3ff87;">
<a href="javascript:afficheronglet(0)">Titre onglet 1</a>
<dd style="display: block; ">
Texte page 1
</dd
</dt>
<dt name="puce" id="puce">
<a href="javascript:afficheronglet(1)">Titre onglet 2</a>
<dd style="display: none; ">
Texte page 2
</dd>
</dt>
</dl>
</div>
function afficheronglet(n)
{
var etat = document.getElementsByTagName("dd");
var fond = document.getElementsByName("puce");
var nbre = etat.length;
for (j = 0; j < nbre; j++)
{
if (etat[n].style.display != etat[j].style.display)
{
etat[n].style.display = "block";
fond[n].style.background = "#e3ff87";
etat[j].style.display = "none";
fond[j].style.background = "none";
}
}
}
#contenant
{
position: absolute;
margin: 0;
width: 770px;
height: auto;
}
#contenant dl
{
list-style-type: none;
padding: 6px 0 4px 0;
}
#contenant dt
{
display: inline;
margin: 0 3px 0 0;
padding: 3px;
border: 1px solid;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
#contenant dd
{
position: absolute;
left: 0;
top: 40px;
width: 100%;
margin: 0;
padding: 5px;
}