Discussion :

[nopnop]

Bonjour,
Je suis en train de réaliser un site web et j'ai trouvé un joli script pour faire un menu avec des onglets (feuilles CSS).
Le souci, c'est que j'ai besoin de l'améliorer un peu et je n'y arrive pas.

J'ai un code dans un frame en haut du navigateur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="header">
<ul>
  <li id="current"><a href="index.html">Accueil</a></li>
  <li><a href="page2.html">page2</a></li>
    etc

Ceci fait apparaitre 2 onglets (Accueil et page2) avec Accueil qui est l'onglet courant, donc dans une autre couleur.
Mais si l'utilisateur clique sur l'onglet page2, il faut obligatoirement que je recharge le frame avec un autre fichier html qui contient id="current" en face de page2. Or, je n'ai pas envie de recharger ce truc la a chaque fois.

Aussi, j'ai tenté de faire un fonction javascript qui permet de definir le current tout seul, mais je ne suis pas sur que ce soit possible car la fonction ne doit pas s'executer lors d'un evenement.

J'ai fait (partie head):

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
 
<SCRIPT LANGUAGE="JavaScript">
 var idcurrent = 'index';
 
function changerid(newval)
  {
idcurrent=newval;
  }  
 
function valeurid(a)
  {
  if (a=idcurrent) {return "current"}
  else {return ""}
  }   
</SCRIPT>

puis partie body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="header">
<ul>
  <li id=valeurid('index');><a href="index.html" onclick="changerid('index');">Accueil</a></li>
  <li id=valeurid('page2');><a href="page2.html"  onclick="changerid('page2');>page2</a></li>
    etc

Lors du clique sur un onglet, la valeur currentid est bien changé en mémoire, mais le id=valeurid('index'); ne fonctionne pas.

Vous auriez une idée pour faire marcher mon système ?
Merci.
Julie

[LEK]

Hello Julie, ton script css doit être modifié : généralement lorsque l'on utilise javascript pour modifier des données de style des éléments de la page on fait varier leur classe css. Actuellement le style affecté à ton onglet courant doit être désigné avec l'id de celui-ci, il faut donc que tu modifie cette définition en classe css. Ensuite tu pourras faire varier le style de l'onglet cliquer en lui donnant la class css "current" et une autre classe css par défaut pour les autres onglets.
Généralement on ne redéfinit pas l'identifiant d'un élément comme tu essaies de le faire, et quand bien même on ne peut pas inclure du javascript comme tu a essayés : il faut que tu te renseignes sur les méthodes d'accès du DOM : des fonctions te permettent d'accéder aux attributs des éléments HTML et les modifiés si nécessaire : setAttribute(), getAttribute()
Il ne doit pas être compliqué de modifié ton code pour répondre à tes besoins mais le mieux et que tu lises quelques cours sur ces concepts si tu veux être à même de réaliser ce que tu souhaites.
Bon codage

[nopnop]

Merci, je vais chercher du coté CSS. Si je trouve un truc interessant, je viendrai le mettre ici.
Bonne soirée.

[SpaceFrog]

un test d'égalité en javascript c'est ==

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  if (a==idcurrent)