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