Changement de class

Version imprimable

31/01/2010, 09h54
bernard26000

Changement de class
Bonjour à tous et à toutes,

J'ai un menu de type
Code:

1 2 3 4 5 <ul> <li>............</li> <li>............</li> .......... </ul>
Le probleme est que le changement de class des boutons de menu se fait tres bien pour des pages qui se rechargent entierement

Code:

<a href="index.php?page=accueil" class="active">Accueil</a>

mais j'ai des pseudo frame et le menu etant dans l'en tête, il faut que je trouve autre chose, alors j'ai essayé ceci
Code:

1 2 3 4 5 6 <script language="javascript"> function change_class() { var btn = document.getElementById("btnTest"); btn.className= "active"; } </script>
et pour le menu

Code:

<a href="index.php?page=accueil" value="Test" title="L'accueil" onclick="change_class()" id="btnTest">Accueil</a>

Mais ca ne fonctionne pas, je dois faire une boulette dans le code, mais je n'arrive pas a trouver l'erreur... ou peut être que je suis completement à coté de la plaque....

Merci à vous
31/01/2010, 13h36
Bovino

Citation:

mais j'ai des pseudo frame

Qu'est-ce que tu appelles des pseudo frame :koi:

Citation:

Mais ca ne fonctionne pas

Qu'est-ce qui ne fonctionne pas ? Ne serait-ce pas que ta classe s'ajoute puis que ta page se recharge ?

Voilà peut être un bout de code un peu plus explicite...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
                	<ul class="art-menu">
                		<li><a href="index.php?page=accueil" value="Test"  onclick="change_class()" id="btnTest">Accueil</a>li>
                		<li><a href="index.php?page=agenda" value="Test" onclick="change_class()" id="btnTest">Agenda</a></li>
                		<li><a href="index.php?page=truc" value="Test" onclick="change_class()" id="btnTest">Truc</a></li>
 
                	</ul>
                </div>
 
<?php
 
  // On définit le tableau contenant les pages autorisées
  // ----------------------------------------------------
  $pageOK = array('agenda' => 'agenda.php',
  			'truc' => 'truc.php', 
                                      'accueil' => 'accueil.php');
 
  // On teste que le paramètre d'url existe et qu'il est bien autorisé
  // -----------------------------------------------------------------
  if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
    include($pageOK[$_GET['page']]);   // Nous appelons le contenu central de la page
  } else {
    include('accueil.php');   // Page par défaut quant elle n'existe pas dans le tableau
  }
 
?>

et, quand je dis que ca ne fonctionne pas, c'est que lorsque la page appelée s'affiche exemple accueil.php, le bouton ne change pas comme il le fait quand la page en totalité (sans pseudo frame) s'affiche avec ce code

Code:

<a href="index.php?page=accueil" class="active">Accueil</a>

Citation:

Envoyé par Bovino

Qu'est-ce qui ne fonctionne pas ? Ne serait-ce pas que ta classe s'ajoute puis que ta page se recharge ?

??????

Pas sur d'avoir été clair....:(

31/01/2010, 14h12
Bovino

Ce que tu appelles pseudo frame, c'est juste un système d'include :roll:
Donc quand tu cliques sur un lien, tu appelles ta fonction change_class(), la classe est bien ajoutée, puis tu recharges la page... or dans ta nouvelle page, tu n'indiques nulle part qu'il faut ajouter une classe spécifique à un lien...

Donc ta fonction JavaScript ne sert strictement à rien et c'est plutôt dans ton script PHP qu'il faut ajouter la classe en fonction du paramètre reçu.
31/01/2010, 14h48
bernard26000

Merci Bovino pour ta réponse

J'ai beaucoup de mal avec le JavaScript

Mais ce que je ne comprend pas c'est que je doive passer par l'include...

Le menu se trouve dans le header qui sert pour toutes les pages, donc, en principe la classe du menu est toujours déclarée .... non ?:roll:

Code:

1 2 3 <li><a href="index.php?page=accueil" value="Test" onclick="change_class()" id="btnTest">Accueil</a>li> <li><a href="index.php?page=agenda" value="Test" onclick="change_class()" id="btnTest">Agenda</a></li> <li><a href="index.php?page=truc" value="Test" onclick="change_class()" id="btnTest">Truc</a></li>
C'est bien index.php qui est appelée à chaque fois :roll:
Donc à chaque clic, tu recharges ta page index.php, ce qui explique que les changements faits en JavaScript disparaissent...
Comment crois-tu que ça pourrait fonctionner autrement ?

01/02/2010, 02h43
bernard26000

Merci encore à toi Bovino...

J'ai abandonné le JS et je me suis servi du PHP pour envoyer les variables de mon menu... et c'est toi qui m'a donné cette solution...

Mais il va falloir que je travaille davantage le JavaScript...

Bonne journée :D
01/02/2010, 08h11
Bovino

A titre d'entrainement (car à mon sens ce n'est pas nécessairement adapté dans ton cas), tu peux essayer de faire le même système mais en récupérant le contenu via AJAX plutôt que par include et en modifiant le className comme tu le faisais ;)