Crear cuenta<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<title>Ejemplo de cambio de contenido con fadeIn y fadeOut</title>
<script>
// inicialmente aparece la primera opcion marcada
var ultimo=1;$(document).ready(function(){
// evento que se ejecutara al seleccionar cualquier opcion del menu
$("#opciones li").click(function(){
// obtenemos el nuevo id
nuevo=$(this).attr("id");
if(nuevo!=ultimo)
{ // escondemos el ultimo id
$("#contenido"+ultimo).fadeOut(function(){
$("#"+ultimo).removeClass("seleccionado");
$("#"+nuevo).addClass("seleccionado");
// mostramos el nuevo id
$("#contenido"+nuevo).fadeIn();
ultimo=nuevo;});
}});
});
</script>
<style>
nav, article {overflow:hidden;}
article {margin-top:20px;}
footer {margin-top:50px;}
.contenido {display:none;}
/* hace referencia a las opciones del menu */ul {list-style-type:none;padding:0px;margin:0px;}
ul li {float:left;padding:5px;cursor:pointer;
border:1px solid #ccc;margin:2px;}
ul li:hover {background-color:#f6ff97;}
/* determina la opcion de menu seleccionada */.seleccionado {background-color:#cccccc;}
</style>
</head>
<body>
<nav>
<ul id="opciones">
<li id="1" class='seleccionado'>Ver contenido1</li>
<li id="2">Ver contenido2</li>
<li id="3">Ver contenido3</li>
<li id="4">Ver contenido4</li>
</ul>
</nav>
<article>
<div id="contenido1">
Contenido 1
</div>
<div id="contenido2" class="contenido">
Contenido 2
</div>
<div id="contenido3" class="contenido">
Contenido 3
</div>
<div id="contenido4" class="contenido">
Contenido 4
</div>
</article>
<footer>
<a href="http://www.lawebdelprogramador.com">La Web del programador</a>
</footer>
</body>
</html>
No hay comentarios