Hola a todos. Tengo hecho en css y javascript una pagina para mostrar y ocultar capas. La función javascript es :
Código PHP:
<script>
capaActual = "primera";
function esActivo(elemento) {
return;
}
function selecciona(elemento) {
if (elemento.split("_")[1] == capaActual) esActivo(elemento);
else {
document.getElementById("pesta_" + capaActual).className = "pesta inactiva";
document.getElementById("capa_" + capaActual).className = "capa invisible";
capaActual = elemento.split("_")[1];
document.getElementById("pesta_" + capaActual).className = "pesta activa";
document.getElementById("capa_" + capaActual).className = "capa visible";
}
}
function alturaContenido() {
var altura = document.body.offsetHeight;
var alturaPestas = document.getElementById("pestas").offsetTop;
var tamPestas = document.getElementById("pestas").offsetHeight;
document.getElementById("contenido").style.height = (altura - (alturaPestas + tamPestas)) + "px";
}
</script>
La web desde donde se llama es :
Código PHP:
<table width="33%" border="0">
<tr>
<td width="31%" valign="top">
<table width="91%" border="0" style="text-align:left;">
<tr>
<td height="20">
<span class="pesta activa" id="pesta_primera" onClick="selecciona(this.id)"></span>
<span class="pesta inactiva" id="pesta_uno" onClick="selecciona(this.id)">
<a href="#" class="ddbullet">MENÚ 1</a>
</span>
</td>
</tr>
<tr>
<td height="20"><span class="pesta inactiva" id="pesta_dos" onClick="selecciona(this.id)">
<a href="#" class="ddbullet">MENÚ 2</a>
</span></td>
</tr>
<tr>
<td height="20"><span class="pesta inactiva" id="pesta_tres" onClick="selecciona(this.id)">
<a href="#" class="ddbullet">MENÚ 3</a>
</span></td>
</tr>
<tr>
<td height="20"><span class="pesta inactiva" id="pesta_cuatro" onClick="selecciona(this.id)">
<a href="#" class="ddbullet">MENÚ 4</a>
</span></td>
</tr>
<tr>
<td height="20"><span class="pesta inactiva" id="pesta_cinco" onClick="selecciona(this.id)">
<a href="#" class="ddbullet">MENÚ 5</a>
</span></td>
</tr>
<tr>
<td height="20"><span class="pesta inactiva" id="pesta_seis" onClick="selecciona(this.id)">
<a href="#" class="ddbullet">MENÚ 6</a>
</span></td>
</tr>
<tr>
<td height="20"><span class="pesta inactiva" id="pesta_siete" onClick="selecciona(this.id)">
<a href="#" class="ddbullet">MENÚ 7</a>
</span></td>
</tr>
<tr>
<td height="20"><span class="pesta inactiva" id="pesta_ocho" onClick="selecciona(this.id)">
<a href="#" class="ddbullet">MENÚ 8</a>
</span></td>
</tr>
</table></td>
<td width="69%" valign="top" align="left">
<table height="5px"><tr><td></td></tr></table>
<div id="contenido" class="activa">
<div class="capa visible" id="capa_primera"></div>
<div class="capa invisible" id="capa_uno">
<strong>Entrantes</strong>
<br />Selección de canapés
<br />
Croquetas caseras de jamón
<br />
Rollitos de berenjena
<br />
Tartaletas de habitas y pisto
<br />
Bolitas de flamenquín
<br />
Pescaito frito
<br />
<br />
<strong>Menú</strong>
<br />Jamón Ibérico
<br />
Queso añejo
<br />
Centro de merluza en marinera
<br />
Sorbete de limón
<br />
Solomillo de cerdo Doña Aldonza
<br />
Tarta Nupcial
<br />
Helado
<br />
<br />
<strong> Bodega</strong>
<br />
Fino D. O. Montilla-Moriles
<br />
Tinto Rioja Crianza de la casa
<br />
Cerveza, refrescos
<br />
Agua mineral
<br />
Cava
</div>
<div class="capa invisible" id="capa_dos">
Huevos fritos con chorizo casero
<br>Huevos a la flamenca
<br>Revuelto de espárragos
<br>Revuelto de setas con gambas
</div>
<div class="capa invisible" id="capa_tres">
Espárragos de Aranjuez a dos salsas
<br>Judías con jamón
<br>Habas con jamón
</div>
<div class="capa invisible" id="capa_cuatro">
Merluza a la Vasca
<br>Gambas cocidas al ajillo
<br>Pulpo a la Gallega
<br>Pez espada a la naranja
<br>Merluza cocida
</div>
<div class="capa invisible" id="capa_cinco">
Entrecot <em>Maitre de hotel</em>
<br>Ternera al Jerez
<br>Callos a la Andaluza
<br>Rabo de toro
<br>Chuletón de ternera
<br>Presa Ibérica
</div>
<div class="capa invisible" id="capa_seis">
Presa ibérica
<br>Carne de monte
<br>Solomillo de cerdo a la pimienta
<br>Flamenquin casero
<br>Pollo al ajillo
</div>
<div class="capa invisible" id="capa_siete">
Presa ibérica
<br>Carne de monte
<br>Solomillo de cerdo a la pimienta
<br>Flamenquin casero
<br>Pollo al ajillo
</div>
<div class="capa invisible" id="capa_ocho">
Presa ibérica
<br>Carne de monte
<br>Solomillo de cerdo a la pimienta
<br>Flamenquin casero
<br>Pollo al ajillo
</div>
</div>
</td>
</tr>
</table>
Y la hoja de estilos es :
Código PHP:
#pestas {
margin: 0px;
padding: 0px;
}
#contenido {
margin: 0px;
padding: 0px;
border: 0px inset gray;
border-top: 0px;
overflow: auto;
}
.pesta {
border: 0px inset gray;
margin: 0px;
padding: 0px 0px;
border-bottom: 0px;
}
.activa {
cursor: pointer;
}
.inactiva {
cursor: pointer;
}
.capa {
overflow: auto;
}
.visible {
display: block;
font-family: "Arial";
font-size : 11px;
color : #76787B;
}
.visibledos {
display: block;
font-family: "Verdana";
font-size : 12px;
color : #B2AB8C;
}
.invisible {
display: none;
}
Bien, lo que hace la web es que pinchando en las capas pesta cambien las capas llamadas capas (ejemplo capa_uno). Lo que quiero es que al pinchar sobre pesta esta se quede en negro. ¿es posible?
Gracias.