salve a tutti. Cercavo un effetto da fare sul mio sito con jquery e l'ho trovato:

http://fiddle.jshell.net/k55Cw/1/show/#


è proprio quello che cerco, ma quando vado a copiare il codice in un blocco note per salvarlo con estensione .html non mi funziona. Come mai? qualche problema con jquery? Grazie in anticipo . Ecco il codice per completezza:


codice:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
  
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    .infozone{
    float:left;
    height:400px;
    width:800px;
    background-color: #000;
    display:none;
}
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $(document).ready(function() {
    $('.sidenav a').click(function(){
    	$('.infozone').fadeOut(850);
    	var region = $(this).attr('data-region');
    	$('#' + region).fadeIn(850);
    	});
    });
});//]]>  

</script>


</head>
<body>
  <div class="container">
    <header>
        <ul class="sidenav">[*]<h2>About</h2>[*]<h2>Services</h2>[*]<h2>Team</h2>[*]<h2>News</h2>[*]<h2>Contact</h2>[/list]
    </header>
    <div id="nav-1" class="infozone">

Hello I'm box 1.</p></div>
    <div id="nav-2" class="infozone">

Hello I'm box 2.</p></div>
    <div id="nav-3" class="infozone">

Hello I'm box 3.</p></div>
    <div id="nav-4" class="infozone">

Hello I'm box 4.</p></div>
    <div id="nav-5" class="infozone">

Hello I'm box 5.</p></div>
</div>
  
</body>


</html>