Mostrar/Ocultar DIVS JS

mariamm_ · #1 (**permalink**) 12/01/2009, 02:32

Hola a todos! Tengo un pequeño problema ...

Resulta que estoy realizando una web la cual contiene un menu con varias opciones y cada ópción del menú pues tiene más de una opción. El caso es que se ha planteado hacer el desarrollo de los contenidos de la siguiente manera.

Para cada opción del menú vamos a crear un fichero (fich.htm) con los contenidos. Y para cada subopción del menú pues vamos a poner en ese mismo fichero unos divs ocultos que se mostrarán u ocultarán según lo que el usuario quiera ver.

El caso es que tengo por otro lado un mapaweb, donde puedo ir a cada opción directamente y aquí viene mi problema. Si yo estoy en el fichero mapaweb.htm y quiero que se muestre el contenido de la opción dos del menú fich.htm, ¿cómo puedo a través de javascript ocultar y desocultar los divs de otro fichero?

No se como hacerlo, espero puedan ay udarme, un saludo!

mariamm_ · #2 (**permalink**) 12/01/2009, 06:22

Alguien me puede orientar????

Se trata realmente de mostrar u ocultar un determinado div de un archivo cuando lo cargo desde un <a> de otro.....

Si me he explicado mal, me lo decís, y lo repito las veces que hagan falta ... al menos lo intento ....

Gracias de nuevo.

uselox · #3 (**permalink**) 12/01/2009, 07:38

Código HTML:

<html>
 <head>
  <title>Aprendiendo Javascript</title>
  <style type='text/css'>
  .mostrar {display:none}
  </style> 
  <script language='javascript'>
  var mostrar = document.getElementById("mostrar");
  </script>
 </head>
 <body bgcolor='#000000'>
  <a href='javascript:;' onclick='document.getElementById("mostrar").className=""'>Mostrar</a>
  <table border='1' cellspacing='0'>
   <tr>
    <td>
     <div id='mostrar' style='color:red;border:solid #cdcdcd 

1.5px;top:50%;left:50%;position:absolute;width:200px;height:200px' class='mostrar'>
      <div style='cursor:default;background-color:#CDCDCD;top:50%;width:15px;height:15px;' 

onclick='document.getElementById("mostrar").className="mostrar"'>X</div>
      Link : <input type='text' value=''/>
     </div>
    </td>
   </tr>
    <td>
     <img width='100' height='100'/>
    </td>
   </tr>
  </table>
 </body>
</html>

mariamm_ · #4 (**permalink**) 12/01/2009, 17:03

Ummm, me temo que no me expliqué bien. De todos modos muchas gracias uselox!

Voy a intentar explicarme.

Yo tengo un fichero que se llama mapaweb.htm, dentro de este tengo varios enlaces a todas y cada una de las páginas de la web, por ejemplo: contacta.htm, index.htm, empresa.htm ...

Dentro del fichero empresa.htm tengo varios divs, cada uno de ellos etiquetados con un id, por ejemplo:

Código:

<div id="datosempresa" style="display:none;">Texto sobre los datos de la empresa</div>
<div id="serviciosempresa" style=display:none;">Texto sobre los servicios de la empresa</div>

Como vemos inicialmente los divs están con el display a none, ya que se mostrará uno cada vez y no todos.

La manera de hacerlo es lo siguiente:

En el fichero mapaweb.htm, tendré la siguiente estructura:

-> Ir a empresa (empresa.htm)
. Ver datos de empresa
. Ver servicios de empresa

...........

Si pico sobre el enlace "Ver datos de empresa" desde el fichero mapaweb.htm, lo que quiero es que se cargue la web empresa.htm, y que en concreto, solo me aparezca por pantalla el div "datosempresa".

Esto último es lo que no sé hacer mediante javascript.

He pensado en hacerlo usando un lenguaje del servidor, como php ... haciendo uso del paso de parámetros. Pero me gustaría hacerlo en javascript y no se si es posible hacerlo.

Espero haberme explicado ahora medianamente bien, ruego me disculpen porque a veces no me explico nada bien.

Gracias a todos.

mariamm_ · #5 (**permalink**) 13/01/2009, 04:40

Es posible hacerlo? Igual me estoy debanando los sesos con algo que no se puede hacer ... :-|

uselox · #6 (**permalink**) 15/01/2009, 10:36

Código HTML:

<style type='text/csss'>
.hide {display:none}
</style>
<script language='javascript'>
function mostrar(hide, show){
   var hide = document.getElementById(hide);
   var show = document.getElementById(show);
   hide.className= "hide"
   show.className= "";
}
</script>
<a href='empresa.htm' onclick='mostrar("datosempresa","serviciosempresa")'>servicios empresa</a><br/>
<a href='datos.htm' onclick='mostrar("serviciosempresa","datosempresa")'>datos</a>
<div id="datosempresa" class='hide'>Texto sobre los datos de la empresa</div>
<div id="serviciosempresa">Texto sobre los servicios de la empresa</div>

si tubieras muchos divs no seria la solucion pero de eso se trata de mostrar y esconder divs

Dalvenjha · #7 (**permalink**) 15/01/2009, 11:00

Hola quisieras algo como esto?

http://remsr.com/experimentos/index.html

dime si es asi o que cosas se le debería cambiar para adaptarlas.