Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 22/01/2013, 20:28

A ver, es algo confuso lo que intentás

Hacer esto tiene su lógica

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>mostrar oculta capas</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
p{
font-weight: bold;
font-size: 11pt;
width: 180px;
cursor: pointer;
font-family: arial, serif;
padding: 5px;
border: dotted 1px #554F9D;
margin-bottom: 2px;
margin-top: 3px;
background-color:white;
}
#Uno,#Dos,#Tres{
display: none;
width: 180px;
font-family: arial, serif;
padding: 15px 5px;
border: dotted 1px #554F9D;
background-color:#A3AD76;
font-size: 10pt;
margin-top: 3px;
margin-bottom:20px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function contenido(cual){
var capas = new Array("Uno", "Dos", "Tres");
for(var i in capas){
var e = document.getElementById(capas[i]);
capas[i] == cual?e.style.display='block':e.style.display='none';        
}
}
//]]>
</script>
</head>
<body>
<p onclick="contenido('Uno')" >uno</p>
<div id="Uno">Texto uno</div>
<p onclick="contenido('Dos')" >dos</p>
<div id="Dos">Texto dos</div>
<p onclick="contenido('Tres')" >tres</p>
<div id="Tres">Texto tres</div>
</body>
</html>

Pero a esto, ocultar la que se clickea y mostrar las restantes, asumiendo que por defecto la fila uno está visible, no le encuentro mucha lógica, salvo que sean solo 2 filas

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<style type="text/css">
/*<![CDATA[*/
tr td{
border-bottom: solid 1px #000;
width: 300px;
}
tr.oculta{
display: none;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
/* script */
function ver(cual){
var tabla = document.getElementById('tabla_uno');
var filas = new Array();
filas = tabla.getElementsByTagName('tr');
for (i=0; i<filas.length; i++) {
if(filas[i].id == cual){
filas[i].style.display = 'none';
}else{
filas[i].style.display = 'block';
}
}
}
//]]>
</script>
</head>
<body>
<table>
<tbody  id="tabla_uno">
<tr id="uno" onclick="ver(this.id);"><td>fila uno</td></tr>
<tr class="oculta" id="dos" onclick="ver(this.id);"><td>fila dos</td></tr>
<tr class="oculta" id="tres" onclick="ver(this.id);"><td>fila tres</td></tr>
<tr class="oculta" id="cuatro" onclick="ver(this.id);"><td>fila cuatro</td></tr>
<tr class="oculta" id="cinco" onclick="ver(this.id);"><td>fila cinco</td></tr>
</tbody>
</table>
</body>
</html>

A lo mejor en el conjunto de tu aplicación tiene más sentido
Saludos