Foros del Web - Ver Mensaje Individual - Ocultar varias capas cuando hago clic en el enlace de abrir

snowmanchip · #4 (**permalink**) 20/12/2011, 07:53

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $('#categoria1 .enlace').click(function(){
        $('#contenido').load('contcat1.html');
        
    });
});
$(document).ready(function() {
    $('#categoria2 .enlace').click(function(){
        $('#contenido').load('contcat2.html');
        
    });
});
 
</script>
 
<style type="text/css">
#contizq {
    width:300px;
    float:left;
}
#categoria1{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
 
}
#categoria2{
width: 200px;
top: 0;
left:0;
margin-top: 8px;
margin-left: 8px;
padding: 0;
background-color: #8B8B42;
}
#contenido {
    width:500px;
    float:left;
}
.enlace {
    text-decoration:none;
}
h1 {
    font-size:14px;
}
p {
    font-size:10px;
}
 
 
</style> 
</head>
 
<body>
<div id="contizq">
<div id="categoria1">
  <a href="#" class="enlace">Categoría1</a></div>
<div id="categoria2">
<a href="#" class="enlace">Categoría2</a>
</div>
</div>
<div id="contenido">
 
</div>
 
</body>
</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<h1>Contenido categoría 1<h1>
<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<h1>
Contenido categoría 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>

Saludos