menú y submenús con onfocus

[angeldelolmo]

Hola amigos tengo un menú de la siguiente forma

- SECCIÓN 1

- SECCIÓN 2
subsecc. 2.1
subsecc. 2.2

- SECCIÓN 3
subsecc. 3.1
subsecc. 3.2

- SECCIÓN 4


todos los enlaces tienen un atributo onfocus que cambia el color del enlace, de modo que en ayuda la navegación al ver qué sección es la que has pinchado.

Ahora bien, me gustaría que las secciones principales NO PIERDAN EL FOCO hasta que no pulse en otra sección principal.

Por ejemplo si hago click en SECCIÓN 3, ésta se pone en naranja. Pero si hago click en subsección 3.1 o 3.2, no quiero que deje de estar en naranja SECCIÓN 3 hasta que deje de hacer click en otra sección principal, por ejemplo, SECCIÓN 4.


¿ALGUIEN SABE CÓMO HACERLO?

[ceSharp]

Hola angeldelolmo,

Seguro que con CSS se logra con mayor facilidad lo que tu quieres. De todas maneras puede que este ejemplo te llegue a valer:
-------------------------
//codigo js
var seccion1 = false;
var seccion2 = false;
var seccion3 = false;
function enfocar(caso)
{
switch(caso)
{
case 1:
document.getElementById('secc1').style.backgroundC olor='green';
document.getElementById('secc2').style.backgroundC olor='transparent';
document.getElementById('secc3').style.backgroundC olor='transparent';
break;
case 2:
document.getElementById('secc2').style.backgroundC olor='red';
document.getElementById('secc1').style.backgroundC olor='transparent';
document.getElementById('secc3').style.backgroundC olor='transparent';
break;
case 3:
document.getElementById('secc3').style.backgroundC olor='yellow';
document.getElementById('secc2').style.backgroundC olor='transparent';
document.getElementById('secc1').style.backgroundC olor='transparent';
break;
}
}
function comprobarFoco(caso)
{
var mantenerFoco = false;

if(!seccion1 && !seccion2 && !seccion3)
mantenerFoco = true;

switch(caso)
{
case 1:
if(mantenerFoco)
{document.getElementById('secc1').style.background Color='green';
document.getElementById('secc2').style.backgroundC olor='transparent';
document.getElementById('secc3').style.backgroundC olor='transparent';}
break;
case 2:
if(mantenerFoco)
{document.getElementById('secc2').style.background Color='red';
document.getElementById('secc1').style.backgroundC olor='transparent';
document.getElementById('secc3').style.backgroundC olor='transparent';}
break;
case 3:
if(mantenerFoco)
{document.getElementById('secc3').style.background Color='yellow';
document.getElementById('secc1').style.backgroundC olor='transparent';
document.getElementById('secc2').style.backgroundC olor='transparent';}
break;
}

}
-----------------------------------------
<!--etiquetas HTML-->
<input type="text" onfocus="seccion1 = true;enfocar(1);" onblur="seccion1 = false;comprobarFoco(1);" value="seccion1" id="secc1" /><br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" value="seccion1 1" id="secc1_1" /><br />
<input type="text" onfocus="seccion2 = true;enfocar(2);" onblur="seccion2 = false;comprobarFoco(2);" value="seccion2" id="secc2" /><br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" value="seccion2 1" id="secc2_1" /><br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" value="seccion2 2" id="secc2_2" /><br />
<input type="text" onfocus="seccion3 = true;enfocar(3);" onblur="seccion3 = false;comprobarFoco(3);" value="seccion3" id="secc3" /><br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" value="seccion3 1" id="secc3_1" /><br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" value="seccion3 2" id="secc3_2" /><br />
---------------------------------
Como no sabía que objetos son tus secciones he hecho cajas de texto (que es más fácil de ver el foco, jeje). Con este ejemplillo si pinchas en las secciones principales se encienden y no pierden el color hasta que no pinchas en otra sección principal.

Pruébalo a ver que te parece.

salu2