Discussion :

[Grizzzly]

Bonjour,

Je suis en train de développer un site basé sur les <div> (plutôt que sur plusieurs pages html, la mode quoi). J'ai donc une div qui sert de menu et quand on clique sur un lien du menu, ça cache affiche la div concernée (après avoir caché celle qui est affichée bien sûr).

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
function showDiv(element)
{
  document.getElementById(element).style.display = 'block';
  document.getElementById(element).focus();
}
 
function hideDiv(element)
{
  document.getElementById(element).style.display = 'none';
}
 
function hideAllDiv()
{
  hideDiv('page1');
  hideDiv('page2');
  etc.
}

Puis, dans le code HTML de la div du menu :

Code :

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

1
2
<a href="JavaScript:hideAllDiv(); showDiv('page1');">Page 1</a>
<a href="JavaScript:hideAllDiv(); showDiv('page2');">Page 2</a>

Ça marche parfaitement, aussi bien sous Mozilla que sous IE6. Le seul truc qui m'agace, c'est que sous Mozilla (comprendre Firefox) ça laisse le petit cadre du focus autour du lien sur lequel l'utilisateur a cliqué. S'il clique sur "Page 1", ça affiche bien la div de la page 1 mais on se retrouve avec un cadre pointillé autour de "Page 1" dans la div du menu.

Est-ce qu'il y a un truc pour régler ça ? J'ai essayé d'envoyer le focus ailleurs en faisant, par exemple, window.focus(); (solution trouvée sur votre forum) mais ça n'a rien donné.

Vous pouvez m'aider ?

[Grizzzly]

Bon, j'ai trouvé !

Des heures de recherche pour trouver cette petite astuce : onFocus="this.blur();"

Ce qui donne en bout de ligne, pour le code HTML :

Code :

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

1
2
<a href="javascript:hideAllDiv(); showDiv('page1');" onFocus="this.blur();">Page 1</a>
<a href="javascript:hideAllDiv(); showDiv('page2');" onFocus="this.blur();">Page 2</a>

Ça marche aussi bien sous Mozilla que sous IE6. Ouf !