Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/07/2007, 11:53
lenz
 
Fecha de Ingreso: agosto-2003
Mensajes: 203
Antigüedad: 20 años, 8 meses
Puntos: 0
Problema con tab

Estoy armando unos tab con css y no logro hacer que cuando este seleccionado quede activo, me queda activo hasta que hago click en cualquier otro lugar de la pagina. Ademas manejo con javascript el activar cada div a los que llama el tab. Dejo el código, espero puedan ayudarme.
css
Código:
A:link
{
    COLOR: #003366;
    TEXT-DECORATION: underline
}
A:visited
{
    COLOR: #003366;
    TEXT-DECORATION: underline
}
A:hover
{
    COLOR: blue;
    TEXT-DECORATION: underline
}
A:active
{
    COLOR: #0066ff;
    TEXT-DECORATION: none
}
a.tab {
	background-color: #e0e0e0;
	border: 1px solid #000000;
	border-bottom-width: 0px;
	padding: 2px 1em 2px 1em;
	position: relative;
	text-decoration: none;
	top: -1px;
	z-index: 100;
}
a.tab, a.tab:visited {  
	color: #808080;
}
a.tab:hover {
	background-color: #d0d0d0;
	color: #606060;
}
a.tab:Active{
	background-color: #d0d0d0;
	text-decoration: none;
	color: #000000;
}

a.tab.activeTab{
	color: #000000;
	background-color: #d0d0d0;
	text-decoration: none;
	z-index: 102;
}
a.tab.activeTab:hover, a.tab.activeTab:Active, a.tab.activeTab:visited{
	color: #000000;
	background-color: #d0d0d0;
	text-decoration: none;
	color: #000000;
}
Javascript
Código:
var idAnt;
idAnt = -1;
function selTab (id){
	var divElemAnt;
	var divElem = document.getElementById("tab"+id);
	if (divElem.style.display=="" || divElem.style.display=="none")
	{
		if (idAnt!=-1)
		{
			divElemAnt = document.getElementById("tab"+idAnt);
			divElem.className= 'tab';
			divElemAnt.style.display="none";
			divElemAnt.style.visibility="hidden";
		}
		divElem.style.display="";
		divElem.style.visibility = "visible";
		divElem.className= 'tab activeTab';
		idAnt = id;
	}
}
Html
Código:
<table>
<tr>
			
<td><a class="tab activeTab" id="ST8" href="javascript:" onclick=" if (idAnt==-1){idAnt=8; ST8.className='tab';} selTab(8)"><b>PREVISIONAL</b></a></td>
<td><a class="tab" id="ST4" href="javascript:" onclick=" if (idAnt==-1){idAnt=8; ST8.className='tab';} selTab(4)"><b>SISTEMAS</b></a></td>
</tr>
</table>
<div id="tab8" style="display:''; visibility:visible;">
1
</div>
<div id="tab4" style="display:none; visibility:hidden;">
2
</div>
Muchas Gracias