Hola amigos,
He trabajado intentando hacer algo asi como una plantilla que sirve para la siguiente en un menu colocado a la izquierda hacer clic y mostrar el contenido de un div en la columna a la derecha.
Si hay otro enlace en el menu, al hacer clic sustituir el contenido anterior por el contenido de otro div en la misma columna a la derecha.
para ello tengo tres codigos uno hmtl, otro css y otro javascript
lo pongo a su consideracion y si alguien puede orientarme para ver que hace falta por lo que no consigo el resultado se lo agradecere.
Codigo HTML
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>Publi-kt</title>
<link rel="stylesheet" href="librerias/estilo_001.css"
type="text/css" media="all">
<script type="text/javascript"
src="librerias/mostrarcapas.js"></script>
</head>
<body>
<div id="contenedorprincipal">
<div id="cabecera">
<div id="izquierdacabecera">
<div class="efectotitulo">
Publi-kt</div> <div class="slogan">y te llegarán<br>clientes
que jamás<br>imaginaste...
</div>
</div>
<div id="derechacabecera">
</div>
</div>
<div id="columnas">
<div id="columna1">
<a href="javascript:toggleDivOL('toHide');" title="Hide the
DIV">Mensaje 1</a><br>
<a href="javascript:toggleDivOL('toHide2');" title="Hide the
DIV">Mensaje 2</a>
</div>
<div id="columna2">
<div id="toHide" class="testDiv">
Mensaje 1
</div>
<div id="toHide2" class="testDiv">
Mensaje 2
</div>
</div>
</div>
</div>
</body>
</html> Codigo CSS
Código HTML:
#columnas{
background-color: #cccccc;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 0 0 0 0px;
}
#columna1{
float:left;
}
#columna2{
float:right;
}
.testDiv {
width: 300px;
padding: 5px;
background-color: #DDD000;
color: #CC0000;
border: 1px solid #000000;
font-weight: bold;
}
Codigo Javascript
:
Código HTML:
function toggleDivOL( elemID )
{
var elem = document.getElementById( elemID );
if( elem.style.position != 'absolute' )
{
elem.style.position = 'absolute';
elem.style.left = '-4000px';
}
else
{
elem.style.position = 'relative';
elem.style.left = '0px';
}
}
Les agradezco de antemano
JOrge