Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 27/07/2012, 18:48

No estoy seguro, pero creo que lo que querés hacer es esto

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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
#stage, #presentation, #home, #contact {
width: 300px;
height: 100px;
margin: 10px;
background: lime;
}
 
/*]]>*/
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
        $("#home").show();
        $('#stage, #presentation, #contact').hide();
        $('#stagebtn, #presentationbtn, #homebtn, #contactbtn').click(function(){
 
        var valor=this.id;
        var cuerpo=valor.substring(0,valor.length-3);
        $('div').hide();
        $('#'+cuerpo).fadeOut(function(){
            console.log('cuerpo: ',cuerpo);
                    $('#'+cuerpo).fadeIn(2500)
                });return false;
 
        });
        
        
    });
 
//]]>
</script>
</head>
<body>
<div id="stage">
    stage
</div>
<div id="presentation">
presentation
</div>
<div id="home">
home
</div>
<div id="contact">
contact
</div>
 
<button id="stagebtn">stage</button>
<button id="presentationbtn">presentation</button>
<button id="homebtn">home</button>
<button id="contactbtn">contact</button>
</body>
</html>

Es decir, mostras por defecto home y ocultás las restantes, en el click, ocultás todas y le hacés fadeIn (el fadein automáticamente te hace el show()) solo al la capa que obtuviste en la variable cuerpo

Saludos