ocultar/mostrar capa

DMH1983 · #1 (**permalink**) 06/06/2011, 08:36

tengo una web sencilla en la que tengo varios divs (menu, cuerpo, etc..)
la cosa esta en que en el menu tengo una serie de links que quiero que se carguen
en el div cuerpo.. pero como no tengo ni zorra de ajax he pensado en trabajar con capas. tengo esta función pero nosé como hacer para pasarle como parametro el div que quiero ocultar ya que hay bastantes secciones. gracias de antemano.

function mostrar(nombre)
{
noticias.style.visibility="hidden";
nombre.style.visibility="visible";
}

<a href="#" onclick="mostrar(videos)">videos</a>

alexg88 · #2 (**permalink**) 06/06/2011, 09:02

Lo mejor para ocultar algo es usar la propiedad display, porque la propiedad visibility oculta el elemento pero este sigue ocupando sitio en la página.

Para lo que quieres hacer lo mejor sería que cada div que quieres ocultar o mostrar le pusieses un id.

Luego le pasas el id a la función:

Código Javascript:

Ver originalfunction mostrar(id)
{
document.getElementById(id).style.display="block";
}

Y el html:

Código HTML:

Ver original<a href="#" onclick="mostrar('videos')">videos</a>
 
<div style="display:none" id="videos">Texto</div>

caricatos · #3 (**permalink**) 06/06/2011, 09:06

Hola:

Si los contenidos que pretendes cargar son de índole variada, te recomiendo que uses enlaces normales... y si debes cargar contenidos similares uses includes...

Con Ajax puedes cargar contenidos, pero debes realizar trabajos extras para que valgan los scripts asociados, a la vez que tendrás problemas cuando decidas un buen posicionamiento en los buscadores (sitemaps, palabras clave...)

Siempre he dicho que es un vicio perjudicial... claro que cada uno hace lo que le da la gana...

Saludos

DMH1983 · #4 (**permalink**) 06/06/2011, 10:52

gracias por las respuestas. probaré de moneto con display ya que ajax ando muy pez.. la cosa está en como quito el div que este en ese momento activo.. pero para desactivar el que este activo en ese momento.. como puedo hacerlo?

alexg88 · #5 (**permalink**) 06/06/2011, 11:06

Para eso sería mejor ponerle una clase al elemento que esté siendo mostrado actualmente y cuando pinches en otro, que se oculto el que tenga esa clase.

Para ello yo utilizaría JQuery, que es una librería para javascript muy útil y que facilita el trabajo.

Te pongo un ejemplo:

Código HTML:

Ver original<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>
  
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type="text/css">
    .active{
 display:block;   
}
 
.ocultos{
  display:none;    
}
  </style>
  
  <script type="text/javascript">
   
  
  function mostrar(id)
{
$('.active').removeClass('active').addClass('ocultos');  
 $('#'+id).removeClass('ocultos').addClass('active');
}
  </script>
  
</head>
<body>
  <a href="#" onclick="mostrar('videos')">videos</a>
<a href="#" onclick="mostrar('otros')">otros</a>
 
<div class="ocultos" id="videos">Texto</div>
<div class="active" id="otros">Texto 2</div>
 
</body></html>

DMH1983 · #6 (**permalink**) 07/06/2011, 02:15

la verdad no tengo ni idea por donde empezar con jquery xD que negao soy

se me a ocurrido esto que aunque creo que es un poco chapucero teniendo ajax y jquery. creo que puede funcionar. La cosa esta en tener toda la información de la web en un div en <P> y crear un bucle que recorra todos los hijos del div y oculte los que estan activos para despues activar el que yo quiero ..

function mostrar(nombre)
{
var lista=document.getElementById('noticias');
for(i=0;i<lista.childNodes.length;i++)
{
if(lista.childNodes[i].style.display="block")
{
lista.childNodes[i].style.display="none";
}
}

nombre.style.display="block";

harryp · #7 (**permalink**) 08/06/2011, 08:58

no he leido todas las respuestas .. pero lo de mostrar ocultar div con jquery, tienes un ejemplo aqui... http://www.forosdelweb.com/f13/conca...bre-id-919709/

Espero que te sirva

maiky_forrester · #8 (**permalink**) 23/12/2011, 14:06

Lo hice con Jquery. Muchas gracias y disculpar el retraso en contestar.