Ocultar y cambiar divs

Pollito_69 · #1 (**permalink**) 09/07/2007, 08:54

Hola, estoy aprendiendo a usar javascript, y lo que quiero hacer es lo siguiente:
Tengo dos divs, en uno aparecen las páginas amigas y en otro una barra de menús que en principio estaría oculto, lo que necesito es crear un script para que al ocultar el div de páginas amigas, se muestre el div de la barra de menús.
Muchas gracias por la ayuda

JavierB · #2 (**permalink**) 09/07/2007, 08:57

Hola Pollito_69

A cada div tienes que ponerle un id:

<div id="paginas"></div>

Para ocultarlo:

document.getElementById('paginas').style.display = 'none';

Para mostrarlo:

document.getElementById('paginas').style.display = 'block';

Saludos,

Pollito_69 · #3 (**permalink**) 09/07/2007, 09:00

¿pero eso sería con dos funciones no?, es que se me ha olvidado comentar, que esa acción la quiero llevar a cabo a través de un link, es decir, que al pulsar en el link desaparezca un div y aparezca el otro. De todas formas agradecería puesierais el código completo, pues aunque estoy empezando no se programar desde 0
Gracias

JavierB · #4 (**permalink**) 09/07/2007, 09:16

Hola de nuevo.

Te pongo un ejemplo completo:

Código:

<html>
<head>
<script type="text/javascript">
function mostrar(obj) {
  document.getElementById('paginas').style.display = (obj.innerHTML=='Menú') ? 'none' : 'block';
  document.getElementById('menu').style.display = (obj.innerHTML=='Menú') ? 'block' : 'none';
  obj.innerHTML = (obj.innerHTML=='Menú') ? 'Páginas' : 'Menú';
}
</script>
</head>
<body>
<div id="paginas">Páginas</div>
<div id="menu" style="display:none">Menú</div>
<a href="#" onclick="mostrar(this); return false">Menú</a>
</body>
</html>

Saludos,

Pollito_69 · #5 (**permalink**) 09/07/2007, 09:32

Muchisimas gracias, creo que con esto me servirá voy a ver cómo funciona.

Pollito_69 · #6 (**permalink**) 10/07/2007, 15:44

Funciona perfectamente, muchas gracias. Pero tengo una duda: se puede modificar el código para que según la terminación del div cambie? Es decir, quiero modificar el script para que si el div se llama paginas_ y tiene después un 1, al hacer clic en un enlace con mostrar(1) se conmuten esos divs. En algunos scripts he visto que modifican algo así en la función: ('paginas') por ('paginas') + id y ('menu') por ('menu') + id
No se si me he explicado bien, de modo que lo amplio un poco:
tengo dos divs de paginas, uno se llama paginas_1 y el otro paginas_2, y otros dos de menu con estos nombres: menu_1 y menu_2, y lo que necesito es modificar el código para que al hacer clic en un enlace se conmuten los divs con terminación 1, y en otro enlace se conmuten los que tienen terminación 2.
¿qué modificaciones habría que hacer en el código?

Pollito_69 · #7 (**permalink**) 11/07/2007, 12:35

¿Sabría alguien modificar el código anterior para hacer lo mencionado en el otro mensaje?
Gracias adelantadas

JavierB · #8 (**permalink**) 11/07/2007, 12:40

Hola de nuevo.

Esto no le he probado, espero que funcione:

Código:

<html>
<head>
<script type="text/javascript">
function mostrar(obj,num) {
  document.getElementById('paginas_'+num).style.display = (obj.innerHTML=='Menú') ? 'none' : 'block';
  document.getElementById('menu_'+num).style.display = (obj.innerHTML=='Menú') ? 'block' : 'none';
  obj.innerHTML = (obj.innerHTML=='Menú') ? 'Páginas' : 'Menú';
}
</script>
</head>
<body>
<div id="paginas_1">Páginas</div>
<div id="menu_1" style="display:none">Menú</div>
<a href="#" onclick="mostrar(this,1); return false">Menú</a>
</body>
</html>

Saludos,

Pollito_69 · #9 (**permalink**) 11/07/2007, 13:08

Funciona perfectamente, muchisimas gracias

Espero no tener que molestarte de nuevo :-p
Un saludo