Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/01/2013, 06:00
franjgg
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 2 meses
Puntos: 4
Ocutal los demas div al hacer click

Hola amigos como estais,


Vereis tengo esta funcion en javascrit que lo que hace es mostrar y ocultar un serie de div bien, el problema es solo quiero que un div este visible y que cuando se pulse sobre uno los demas se escondan con lo que solo va estar visible el que su pulse.


Código Javascript:
Ver original
  1. function toggleDivOL( elemID )
  2. {
  3.     var elem = document.getElementById( elemID );
  4.     if( elem.style.position != 'absolute' )
  5.     {
  6.         elem.style.position = 'absolute';
  7.         elem.style.left = '-4000px';
  8.     }
  9.     else
  10.     {
  11.         elem.style.position = 'relative';
  12.         elem.style.left = '0px';
  13.     }
  14. }


estos son los div que se muestran y ocultan:

Código PHP:
echo '<div id="'.$array['Nimagen'].'" class="testDiv">';
echo 
'</div>' 
y este es el link que hace la llamada


Código HTML:
<a  href="javascript:toggleDivOL('<?php echo $array['Nimagen'] ?>');" /></a> 


Tambien he encontrado este codigo pero no se si podria hacer dinamico:


Código HTML:
Ver original
  1. <script language="javascript" type="text/javascript">
  2. function mostrar(div)
  3.     {
  4.         document.getElementById('div1').style.display = 'none'; /* y repetis esto por cada div, o lo haces automatico */
  5.         document.getElementById('div2').style.display = 'none';
  6.         document.getElementById('div3').style.display = 'none';
  7.         document.getElementById(div).style.display = 'block'; /* mostras el que queres mostrar */
  8.     }
  9.  
  10. <style type="text/css">
  11.     * div { display: none; height: 100px; width: 100px; }
  12. </head>
  13.  
  14.  
  15. <a href="#"  onClick="mostrar('div1')">1</a>
  16. <a href="#"  onClick="mostrar('div2')">2</a>
  17. <a href="#"  onClick="mostrar('div3')">3</a>
  18.  
  19.  
  20.  
  21.     <div id="div1" style="background-color:red;"></div>
  22.     <div id="div2" style="background-color:green;"></div>
  23.     <div id="div3" style="background-color:blue;"></div>
  24. </body>



A ver si alguien sabe como se podria modificar para que funcionase de este modo

Un saludo amigos

Última edición por franjgg; 04/01/2013 a las 07:03