Bonjour à tous,

je suis actuellement en train de développer mon site personnel. Pour des raisons pratique je voudrais charger les informations depuis ma base de donnée au chargement de la page puis travailler en javascript par la suite, pour cela j'utilise un menu qui à chaque clique sur un onglet affiche la partie corresponde et masque les autres.

Pour ce faire, j'utilise la methode setAttribute et removeAttribute avec comme paramètre class : hide, hide étant une classe ayant pour style un display:none.

Tout fonctionne parfaitement sous firefox, chrome, opéra, etc... Mais IE ne semble pas interpréter la méthode setAttribute. Après quelques recherches, j'ai trouver un topic disant d'utiliser className et non class pour IE mais cela n'a rien changé. Je me suis donc orienté vers jQUERY et ses méthodes .addClass et .removeClass() encore une fois sans grand succès...

Pour illustrer mes propos, voici le code épuré de ce que je souhaite faire :

Partie HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="submenu">
<div id="news" class="submenu_btn_left" onclick="setContent(this.id)">Nouveautés</div>
<div id="tuto" class="submenu_btn" onclick="setContent(this.id)">Tutoriaux</div>
<div id="m_archive" class="submenu_btn" onclick="setContent(this.id)">Archives</div>
</div>
...
<div id="content_news">
...
</div>
<div id="content_tuto" class="hide">
...
</div>
<div id="content_archive" class="hide">
...
</div>
Partie CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
.hide{
display:none;
}
Partie JS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function setContent(id){
var t = document.getElementById(id).parentNode.childNodes;
...
for(i=1; i<t.length; i++){
     ...
     t[i].style.background="gray";
     t[i].style.color="#FFFFFF";
     $('#content_'+t[i].id).removeClass().addClass('hide'); //pour chaque parent, je récupère l'id et je masque le contenu correspondant
     //document.getElementById('content_'+t[i].id).setAttribute('class', 'hide');
     //document.getElementById('content_'+t[i].id).setAttribute('className', 'hide');
}
 
document.getElementById(id).style.background= "#FFFFFF";
document.getElementById(id).style.color= "#000000";
$('#content_'+id).removeClass(); //J'affiche le contenu du parent sélectionné
//document.getElementById('content_'+id).removeAttribute('class');
//document.getElementById('content_'+id).removeAttribute('className');
}
Pour les 3 méthodes utilisées, le script fonctionne sur tous les navigateurs que je possède excepté IE... Quelqu'un a-t-il une solution ?