[JS] Impossible de changer une classe ...

11 juillet 2011 à 11:23:15

Bonjour à vous tous. Tout d'abord, pour mon premier post, je remercie le site du zéro pour sa précieuse aide en PHP, HTML et Javascript. Ce site est tout simplement génial.

Mais nous ne sommes pas ici pour cela. J'ai un problème que je n'arrive pas à résoudre malgré plusieurs jours de recherche. De plus, j'ai encore un peu de mal à me familiariser avec le Javascript... Bref.

Je suis en train de réaliser un site Internet où le menu est sous forme d'onglets. Honte à moi, je ne l'ai pas conçu grâce aux balises <li> mais grace à une <table>. J'aimerai donc, tout simplement, que la page où je suis actuellement ait un onglet actif qui soit différent des autres.

Après avoir tenté d'utiliser de nombreux bouts de codes chopés sur la toile (cssjs, et beaucoup d'autres), je ne suis toujours pas en mesure de réaliser cela. J'ai donc retroussé mes manches, et j'ai tenté de réaliser moi même ce bout de code, que j'ai placé dans ma balise <head>, à la suite d'autres bouts de scripts :

<script type="text/javascript">
function onglet('classMenu') {
		document.getElementById('menuAccueil').className = 'tabMenu';
		document.getElementById('menuEtudes').className = 'tabMenu';
		document.getElementById('menuCont').className = 'tabMenu';
		document.getElementById('menuAdmin').className = 'tabMenu';
		var ongletActif = document.getElementById('classMenu');
		document.ongletActif.className = 'tabMenu actif';
		}
</script>

Je joins mon menu en HTML :

<div class="menu">
<table>
<tr>
	<td id="menuAccueil" class="tabMenu"><a href="index.php" onclick="onglet('menuAccueil')">accueil</a></td>
	<td id="menuEtudes" class="tabMenu"><a href="tabEtudes.php">etudes</a></td>
	<td id="menuCont" class="tabMenu"><a href="tabCont.php">contributeurs</a></td>
	<td id="menuAdmin" class="tabMenu"><a href="administration.php">administration</a></td>
</tr>
</table>
</div>

Je n'ai changé volontairement que la ligne du menu Accueil pour pouvoir tester si cela fonctionnait. Voici l'effet voulu : Quand je clique sur un lien de mon menu, les classes de mon menu se remettent à zéro et la classe de la page où je me dirige change pour pouvoir bénéficier du style CSS contenu dans ma page style.css. Cependant, rien ne se passe. Je précise que quand je modifie à la main la classe en "tabMenu actif", le changement est effectif.

Que dois-je modifier pour que cela fonctionne ? Avez-vous d'autres trucs plus malins à me proposer ? Est-ce que mes bouts de code sont mal palcés ?

Je précise simplement que plusieurs pages peuvent avoir l'onglet Etudes actif car je propose d'abord un tableau, puis une fiche détaillée de l'étude, par exemple.

Merci à vous pour le temps consacré à la lecture de ce post.

Edit : je viens de me rendre compte que ce script n'est pas ce que je souhaite reellement, mais il me parait tout de même important de le comprendre. J'aimerai que le script change automatiquement le CSS de l'onglet en question en fonction de la page où je suis actuellement (je veux que mon onglet Etudes soit actif pour la page tabEtudes et Etude). Est-ce possible ?

miclebowski

11 juillet 2011 à 11:33:13

Salut,

le probleme vient de l'argument de ta fonction, un paramètre est une variable pas un string :

function onglet(classMenu) {
var ongletActif = document.getElementById(classMenu);

antoine_peze

11 juillet 2011 à 11:39:46

Malheureusement, cela ne change rien ...

miclebowski

11 juillet 2011 à 11:46:55

Il faut aussi mettre des onclick partout ou tu en as besoin

et c'est pas document.ongletActif mais ongletActif tout court, sur lequel tu changes la className, puisque ongletActif est déjà un noeud du DOM

antoine_peze

11 juillet 2011 à 13:49:09

Voila ce que j'ai, ce qui ne fonctionne toujours pas ...

<script type="text/javascript">
function onglet(classMenu) {
	document.getElementById(menuAccueil).className = 'tabMenu';
	document.getElementById(menuEtudes).className = 'tabMenu';
	document.getElementById(menuCont).className = 'tabMenu';
	document.getElementById(menuAdmin).className = 'tabMenu';
	var ongletActif = document.getElementById(classMenu);
	ongletActif.className = 'tabMenu actif';
}
</script>

<td id="menuAccueil" class="tabMenu"><a href="index.php" onclick="onglet(menuAccueil)">accueil</a></td>
<td id="menuEtudes" class="tabMenu"><a href="tabEtudes.php" onclick="onglet(menuEtudes)">etudes</a></td>
<td id="menuCont" class="tabMenu"><a href="tabCont.php" onclick="onglet(menuCont)">contributeurs</a></td>
<td id="menuAdmin" class="tabMenu"><a href="administration.php" onclick="onglet(menuAdmin)">administration</a></td>

miclebowski

11 juillet 2011 à 13:52:56

Remets des sauts de ligne c'est illisible sinon o_O

Je t'ai donne la solution par rapport a ongletActif dans mon précédent post.

Essaye ça, ça va marcher

antoine_peze

11 juillet 2011 à 14:21:23

Tout d'abord merci de tes réponses (chose que je n'avais pas encore dit, et je m'en excuse)

J'ai remis à jour les lignes de code que je possède maintenant, dans le post précédent. Effectivement j'avais oublié d'enlever un "document."

Mais la class ne veux toujours pas changer ...

miclebowski

11 juillet 2011 à 14:25:48

Ah oui, il te restait une petite chose a changer

Quand tu appelles ta fonction, tu dois passer un string en paramètre

(j’espère que t'es pas paumé

)

Donc : onclick="onglet('menuAccueil')" et ainsi de suite

Un bon conseil pour comprendre tout ca, un peu de lecture : http://www.siteduzero.com/tutoriel-3-3 [...] onctions.html

antoine_peze

11 juillet 2011 à 14:31:35

Décidemment, il y a toujours un problème. J'ai déjà lu plusieurs fois ce tuto, mais je n'y arrive pas, c'est embetant ... car j'aimerai aller plus loin après ...

A présent, tous mes menus ont cela : onclick="onglet('menuAccueil')" (avec le nom adapté, bien evidemment)

miclebowski

11 juillet 2011 à 14:35:25

Je vois pas le souci, tu peux tester ici : http://jsbin.com/ibalar/3 (je l'ai mis juste sur le lien accueil), et bien ça me remplace bien la classe par 'tabMenu actif'.

Poste tout ton HTML et le JS pour checker

Et regarde aussi cette partie : http://www.siteduzero.com/tutoriel-3-3 [...] tre-code.html et donne le résultat de la console d'erreur

Edit : Tu changes des bouts de code qui étaient bons précédemment on va pas s'en sortir comme ça

Donc remets bien document.getElementById('menuAccueil'), car getElementById reçoit un string en paramètre ... si tu mets document.getElementById(menuAccueil), alors CA veut dire que tu as créé une variable menuAccueil qui contient un string, par exemple :

var menu1 = 'menuAccueil';
document.getElementById(menu1);
document.getElementById('menuAccueil'); // identique a la ligne du dessus

ou pareil pour une fonction :

function test(menu1) {
document.getElementById(menu1);
}

que tu appelles de cette façon : test('menuAccueil');

C'est plus clair ?

antoine_peze

11 juillet 2011 à 17:24:31

c'est très clair, merci pour les précisions. Je vais continuer d'étudier cela. Ca commence vraiment à m'embeter ... Meme quand je regarde ta page jsbin, je vois pas la class de l'accueil changer ...

Petite précision : je code pour IE7 et je n'ai pas vraiment d'autres navigateurs dispo ...

Bref.

Sinon, existe-t-il une fonction de javascript qui permette de modifier le CSS sans evenement particulier ? Car j'aimerai avoir un menu fixe en HTML, mais j'aimerai rentrer une ligne de code en javascript au début de chaque page pour préciser quel onglet "activer". Est-ce possible ? si oui, comment stp =D

Merci encore

miclebowski

11 juillet 2011 à 17:29:43

Je peux pas tester avec IE7, mais ça marche bien avec IE8 : http://jsbin.com/ibalar/5/

Il faut savoir que le code source ne change pas sur IE, c'est peut être cela qui t'a induit en erreur.