Foros del Web » Creando para Internet » Diseño web »

Ocultar varias capas cuando hago clic en el enlace de abrir

Estas en el tema de Ocultar varias capas cuando hago clic en el enlace de abrir en el foro de Diseño web en Foros del Web. Pongo el código que he creado y después la pregunta: Cita: <html> <head> <title></title> <style type=text/css> div#categoria1{ width: 200px; top: 0; left:0; margin-top: 8px; margin-left: ...
  #1 (permalink)  
Antiguo 18/12/2011, 13:46
UsuarioArroba
Invitado
 
Mensajes: n/a
Puntos:
Ocultar varias capas cuando hago clic en el enlace de abrir

Pongo el código que he creado y después la pregunta:

Cita:
<html>
<head>
<title></title>
<style type=text/css>
div#categoria1{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
display: none;
}
div#categoria2{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
display: none;
}
</style>
</head>
<body>
<div id="categorias">
<a href="#" onclick="document.getElementById('categoria1').sty le.display='block';">Abrir Categoria 1</a>
<a href="#" onclick="document.getElementById('categoria2').sty le.display='block';">Abrir Categoría 2</a>
</div>
<div id="categoria1">
<a href="#" onclick="document.getElementById('categoria1').sty le.display='none'">Cerrar Categoría 1</a>
</div>
<div id="categoria2">
<a href="#" onclick="document.getElementById('categoria2').sty le.display='none';">Cerrar Categoría 2</a>
</div>
</body>
</html>
Vale, al abrir la página se ven dos opciones, "abrir categoría 1" y abrir "categoría 2". Si abro "categoría 1" y después "categoría 2", esta última se abre debajo de "categoría 1". Lo que necesito hacer es que cuando abra una categoría, cualquier otra que se haya abierto antes se oculte para que solo se vea una a la vez. ¿Como?
  #2 (permalink)  
Antiguo 19/12/2011, 15:11
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 12 años, 7 meses
Puntos: 50
Respuesta: Ocultar varias capas cuando hago clic en el enlace de abrir

Lo más facil:
http://jqueryui.com/demos/accordion/
Saludos
__________________
He aprendido mucho y sigo aprendiendo cada día aquí...así que ayudo cuando puedo para disminuir mi deuda XD..
mi hobby
  #3 (permalink)  
Antiguo 20/12/2011, 04:00
UsuarioArroba
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar varias capas cuando hago clic en el enlace de abrir

Gracias snowmanchip, pero no quiero hacer un acordeón. Mi idea es ubicar luego las capas con las opciones de cada categoría a la derecha y dejar a la izquierda los enlaces para ir abriendo cada una de estas.

Había pensado en usar javascript para cerrar alguna capa que hubiese abierto anteriormente y abrir la que deseo, pero el código no funciona. Lo dejo por si alguien lograse averiguar que es lo que estoy haciendo mal:

Código:
<html>
<head>
<title></title>
<script type="text/javascript">
function abrircategoria(val)
{
    if (val = 1)
    {
    document.getElementById('categoria2').style.display='none'
    document.getElementById('categoria1').style.display='block'    
    }
    if (val = 2)
    {
    document.getElementById('categoria1').style.display='none'
    document.getElementById('categoria2').style.display='block'    
    }
}
</script>
<style type="text/css">
div#categoria1{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
display: none;
}
div#categoria2{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
display: none;
}
</style> 
</head>
<body>
<div id="categorias">
<a href="#" onclick="javascript:abrircategoria(1)">Abrir Categoria 1</a> 
<a href="#" onclick="javascript:abrircategoria(2)">Abrir Categoria 2</a> 
</div>
<div id="categoria1">
<a href="#" onclick="document.getElementById('categoria1').style.display='none'">Cerrar Categoria 1</a> 
</div>
<div id="categoria2">
<a href="#" onclick="document.getElementById('categoria2').style.display='none';">Cerrar Categoria 2</a>
</div>
</body>
</html>
  #4 (permalink)  
Antiguo 20/12/2011, 07:53
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 12 años, 7 meses
Puntos: 50
Respuesta: Ocultar varias capas cuando hago clic en el enlace de abrir

Si creo entender bién esto se puede hacer con el método load de Jquery que es más sencillo y te permite ordenar en otras páginas los contenidos de los enlaces, te pongo un código de ejemplo aplicado al código que posteaste, espero sea lo que buscas, pruébalo y si es lo que buscas te dejo un tutorial donde se explican otras técnicas para lograr esto paso a paso..saludos..

HTML Principal:


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin título</title>
  5. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  6. <script language="javascript" type="text/javascript">
  7. $(document).ready(function() {
  8.     $('#categoria1 .enlace').click(function(){
  9.         $('#contenido').load('contcat1.html');
  10.        
  11.     });
  12. });
  13. $(document).ready(function() {
  14.     $('#categoria2 .enlace').click(function(){
  15.         $('#contenido').load('contcat2.html');
  16.        
  17.     });
  18. });
  19.  
  20.  
  21. <style type="text/css">
  22. #contizq {
  23.     width:300px;
  24.     float:left;
  25. }
  26. #categoria1{
  27. width: 200px;
  28. top: 0;
  29. left:0;
  30. margin-top: 8px;
  31. margin-left: 8px;
  32. padding: 0;
  33. background-color: #8B8B42;
  34.  
  35. }
  36. #categoria2{
  37. width: 200px;
  38. top: 0;
  39. left:0;
  40. margin-top: 8px;
  41. margin-left: 8px;
  42. padding: 0;
  43. background-color: #8B8B42;
  44. }
  45. #contenido {
  46.     width:500px;
  47.     float:left;
  48. }
  49. .enlace {
  50.     text-decoration:none;
  51. }
  52. h1 {
  53.     font-size:14px;
  54. }
  55. p {
  56.     font-size:10px;
  57. }
  58.  
  59.  
  60. </style>
  61. </head>
  62.  
  63. <div id="contizq">
  64. <div id="categoria1">
  65.   <a href="#" class="enlace">Categoría1</a></div>
  66. <div id="categoria2">
  67. <a href="#" class="enlace">Categoría2</a>
  68. </div>
  69. </div>
  70. <div id="contenido">
  71.  
  72. </div>
  73.  
  74. </body>
  75. </html>

Páginas que contienen el contenido de las categorías, sólo a modo de ejemplo, no debe contener nada más que código html, sin estilos no el Doctype, sólo las etiquetas que se visualizarán en las categorías:

Categoría 1, página concat1.html
Código HTML:
Ver original
  1. <h1>Contenido categoría 1<h1>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus, nunc id gravida sollicitudin, mi neque congue justo, vitae suscipit erat odio in nibh. Aenean at nulla tortor, adipiscing commodo nisi. Maecenas turpis nisi, rhoncus a commodo a, porta scelerisque felis. Cum sociis natoque penatibus et magnis dis parturient </p>

Categoría 2, página concat2.html

Código HTML:
Ver original
  1. <h1>
  2. Contenido categoría 2
  3. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus, nunc id gravida sollicitudin, mi neque congue justo, vitae suscipit erat odio in nibh. Aenean at nulla tortor, adipiscing commodo nisi. Maecenas turpis nisi, rhoncus a commodo a, porta scelerisque felis. Cum sociis natoque penatibus et magnis dis parturient </p>

Saludos
__________________
He aprendido mucho y sigo aprendiendo cada día aquí...así que ayudo cuando puedo para disminuir mi deuda XD..
mi hobby
  #5 (permalink)  
Antiguo 20/12/2011, 08:59
UsuarioArroba
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar varias capas cuando hago clic en el enlace de abrir

ummm, he creado los tres ficheros, index.html, contcat1.html y contcat2.html, poniendo el código que me has facilitado y no hace nada cuando hago clic en los enlaces.
  #6 (permalink)  
Antiguo 20/12/2011, 09:00
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Ocultar varias capas cuando hago clic en el enlace de abrir

no te funciona por que estás asignando en lugar de comparando
Cita:
if (val = 1) // asigna. el valor de val es 1
if (val ==1) // compara. evalúa si el valor de val es 1
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #7 (permalink)  
Antiguo 20/12/2011, 09:39
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 12 años, 7 meses
Puntos: 50
Respuesta: Ocultar varias capas cuando hago clic en el enlace de abrir

Isabel tiene razón..así funciona perfecto....

Al revisar veo que me equivoqué en los nombres de esos archivos yo indiqué concat y debe decir contcat, renómbralos con contcat1 y contcat2..
Prueba de nuevo con los códigos exactamente iguales y me dices..a mi me funciona perfecto... en los html que se adjuntan contcat1 y contcat 2 no lleva el doctype...
Saludos
__________________
He aprendido mucho y sigo aprendiendo cada día aquí...así que ayudo cuando puedo para disminuir mi deuda XD..
mi hobby
  #8 (permalink)  
Antiguo 20/12/2011, 15:27
UsuarioArroba
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar varias capas cuando hago clic en el enlace de abrir

oups, la última vez que usé javascript (hace años) me pasó lo mismo, usaba = en vez de ==. Gracias por tu ayuda IsabelM, ahora va perfecto.

snowmanchip, no se que sucede en el caso de tu código. Leyéndolo observe lo del nombre de los archivos y los renombre, pero aún así, no hay modo de que funcione. No he usado doctype, lo único que he hecho es copiar y pegar los códigos sin modificar nada.

Con la solución que me ha dado IsabelM puedo continuar con el proyecto, pero no comprendo que es lo que sucede en el caso de tu código, pues lo mas normal es que funcionara, ya que está igual en tu ordenador que en el mio. Si lo deseas puedes comprimir los 3 archivos en un rar y pasármelo.

Este es el que yo he creado con el código que me has dado: http://drawpr.com/f/1052f/Proyecto%20Menu%20CSS.rar

Aunque reitero que con la solución de Isabel tengo suficiente. Saludos.
  #9 (permalink)  
Antiguo 20/12/2011, 15:36
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Ocultar varias capas cuando hago clic en el enlace de abrir

Cita:
Iniciado por UsuarioArroba Ver Mensaje
Aunque reitero que con la solución de Isabel tengo suficiente. Saludos.
ese código deberías de intentar hacerlo mas dinámico

por ejemplo
Cita:
<html>
<head>
<title></title>
<script type="text/javascript">
function abrircategoria(val) {
var seleccion = val.split('#')[1];
for(var i = 1, elem = document.getElementsByTagName('div'); i < elem.length; i++) {
document.getElementById(elem[i].id).style.display = (seleccion == elem[i].id) ? 'block' : 'none';
}
}
</script>
<style type="text/css">
div#categoria1, div#categoria2{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
display: none;
}
</style>
</head>
<body>
<div id="categorias">
<a href="#categoria1" onclick="abrircategoria(this.href); return false;">Abrir Categoria 1</a>
<a href="#categoria2" onclick="abrircategoria(this.href); return false;">Abrir Categoria 2</a>
</div>
<div id="categoria1">
<a href="#" onclick="this.parentNode.style.display='none'; return false;">Cerrar Categoria 1</a>
</div>
<div id="categoria2">
<a href="#" onclick="this.parentNode.style.display='none'; return false;">Cerrar Categoria 2</a>
</div>
</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 20/12/2011 a las 16:07
  #10 (permalink)  
Antiguo 20/12/2011, 16:02
 
Fecha de Ingreso: agosto-2011
Ubicación: Viña del Mar, Chile
Mensajes: 311
Antigüedad: 12 años, 7 meses
Puntos: 50
Respuesta: Ocultar varias capas cuando hago clic en el enlace de abrir

El código está bién pero debes probarlo en un servidor local o remoto,
Saludos
__________________
He aprendido mucho y sigo aprendiendo cada día aquí...así que ayudo cuando puedo para disminuir mi deuda XD..
mi hobby

Etiquetas: capas, clic, enlace
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:06.