control tab con javascript

franko1809 · #1 (**permalink**) 18/01/2008, 20:23

Actualmente uso este codigo javascript que muestra y oculta las tablas,
para ello he declarado style="display:none" a cada tabla para ocultarlas lo que se asemeja a un control tab
El problema es que no se como hacer para mostrar una de las tablas al cargar la pagina ya que si le quito el style="display:none" a una de las tablas esta ya no desaparece al cargar el siguiente tab, ahi les dejo el codigo completo

<script>
var obj=null;
function viewHide(id){
var targetId, srcElement, targetElement;
var targetElement = document.getElementById(id);
if (obj!=null)
obj.style.display='none';
obj=targetElement;
targetElement.style.display = "";
}
</script>
<style>
#menu{padding:10;color:green;text-decoration:none;}
#menu:hover{color:black; text-decoration: underline;}
</style>
</head>
<body>
<table border="1">
<tr>
<td width="535" height="57">Control tab con javascript?</td>
<tr>
<td height="33">
<a href="#" Onclick="viewHide('tabla1')" id="menu">seleccion A</a>|
<a href="#" Onclick="viewHide('tabla2')" id="menu">seleccion B</a>|
<a href="#" Onclick="viewHide('tabla3')" id="menu">seleccion C</a>|
</td>
</table>

<table id=tabla1 width="545" border="0" bgcolor="#CCCCCC" style="display:none">
<tr><td height="60">Contenido de la ficha # 1</td></tr>
</table>

<table id=tabla2 width="545" border="0" bgcolor="#DFEBF2" style="display:none">
<tr><td height="60">Contenido de la ficha # 2</td></tr>
</table>

<table id=tabla3 width="545" border="0" bgcolor="#C2E4C4" style="display:none">
<tr><td height="60">Contenido de la ficha # 3</td></tr>
</table>

tunait · #2 (**permalink**) 19/01/2008, 06:43

Prueba así

Código:

<script type="text/javascript">
idVisibleInicial = 'tabla1'
var obj= null
function viewHide(id){
	var targetId, srcElement, targetElement;
	var targetElement = document.getElementById(id);
	if (obj == null){
		obj = document.getElementById(idVisibleInicial);
	}
	obj.style.display='none';
	obj=targetElement;
	targetElement.style.display = "";
}
</script>

A lo que tienes debes agregar lo que dejo en negritas y substituir

if (obj!=null) por lo que está en verde.

a la variable idVisibleInicial asígnale el id de tabla que vayas a mostrar inicialmente (por defecto)

saludos

franko1809 · #3 (**permalink**) 19/01/2008, 08:19

Cambie lo que mencionaste y no pasa nada aun no me muestra la tabla inicial

Saludos

tunait · #4 (**permalink**) 19/01/2008, 08:34

¿Le quitaste el display none a la tabla inicial?

Dijiste que

Cita:

El problema es que no se como hacer para mostrar una de las tablas al cargar la pagina ya que si le quito el style="display:none" a una de las tablas esta ya no desaparece al cargar el siguiente tab

y la modificación que te he propuesto lo soluciona en la forma en la que dices que pretendes hacerlo

franko1809 · #5 (**permalink**) 19/01/2008, 13:38

Todo solucionado me faltaba quitarle el style="display:none" a la tabla que queria mostrar al cargar la pagina.

Tengo otra duda, me explico, al abrir la pagina se cargan todas las tablas incluyendo las que estan ocultas o solo la que quiero ver al cargarla, ya que si carga todas seria un problema por que si la tabla contiene imagenes y entre otras cosas, pondria lenta mi web.

saludos

gracias por tu respuesta

tunait · #6 (**permalink**) 19/01/2008, 13:52

Cita:

Iniciado por franko1809

Todo solucionado me faltaba quitarle el style="display:none" a la tabla que queria mostrar al cargar la pagina.

me alegra que lo solucionaras

Cita:

Iniciado por franko1809

Tengo otra duda, me explico, al abrir la pagina se cargan todas las tablas incluyendo las que estan ocultas o solo la que quiero ver al cargarla, ya que si carga todas seria un problema por que si la tabla contiene imagenes y entre otras cosas, pondria lenta mi web.

Se cargan todas, incluyendo las que están ocultas. Con el script lo único que haces es mostrar u ocultar la información que ya está cargada dentro del documento.

Un saludo