JScript : boîte à onglets sous IE

Résolu/Fermé
Bertrand40 Messages postés 1193 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 1193 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 - 1 févr. 2010 à 22:05
Bonsoir,

Je débute en Javascript et je me suis fait tout seul comme un grand une boîte à onglets. La mauvaise surprise ça a été lorsque j'ai chargé la page sous IE.. La cata. Sous FF, Opera et Chrome ça marche correctement en revanche. Voyez vous-mêmes : http://aeroport.calais.free.fr/pronos/test.php

J'ai mis le problème en JScript mais il semblerait qu'il y ait 2 soucis sous IE :
1- le script ne s'exécute pas normalement, le clic sur un nouvel onglet n'a pas l'effet escompté
2- la mise en page est complètement foireuse sous IE

Voici les 3 bouts :

Javascript

function afficheronglet(n)
{
var etat = document.getElementsByName("onglet");
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 = "yellow";
etat[j].style.display = "none";
fond[j].style.background = "none";
}
}
}

L'appel :

<script type="text/javascript" src="scripts.js"></script>

<div id="contenant">
<dl>
<dt name="puce" style="background: yellow;">
<!-- onglet 1 : n = 0 -->
<a href="#" onclick="javascript:afficheronglet(0)">But et gains</a>
<div id="onglet" style="display: block; " name="onglet">
<p>On ne joue ici que sur la course (pas de paris pour les qualifications). Le but est de <strong>parier sur les 10 premiers pilotes à l'arrivée de chaque weekend de grand-prix</strong>. Au terme du grand prix, le pronostic rapporte des points (cf juste en dessous) et un cumul de points se fait
tout au long de la saison. Au terme de la saison un vainqueur sera désigné.</p>
</div>
</dt>
<dt>....
</dl>
</div>

Et la css :

#contenant
{
margin: 0;
width: 100%;
height: auto;
}

#onglet
{
position: absolute;
width: 780px;
padding: 0;
}
#contenant dl
{
border-bottom: 1px solid;
width: 100%;
height: 22px;
}

#contenant dt
{
display: inline;
list-style-type: none;
margin: 0 3px 0 0;
padding: 3px;
border: 1px solid;
border-bottom: 0;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}

Quelqu'un peut-il m'aider svp ? Merci d'avance.

1 réponse

Bertrand40 Messages postés 1193 Date d'inscription vendredi 27 mars 2009 Statut Membre Dernière intervention 27 février 2023 192
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;
}
1