jQuery load html file into <div>

Question

I wanted to know how I can use an html file and use it to replace the space inside a

I know you can do it with jquery but for some reason it isn't working out for me. I have:

$(document).ready(function() {    
    $('#nav li a').click(function(){  
        var toLoad = $(this).attr('href');  
        $('#main').hide('fast',loadContent);   
        function loadContent() {  
            $('#main').load(toLoad);  
        }  
        return false; 
    });  
});  

So whenever I click a link from my navbar it should edit the #main div and bring up the corresponding html file to replace the div with. For some reason it just leaves it blank.

Answer 1

Check this line

 $('#main').hide('fast',loadContent); 

It is hiding the div where you are loading the content. If you show that div again, you can see the content on div. So

 Change 

 $('#main').load(toLoad);

 to 

 $('#main').load(toLoad).show();

Answer 2

You may try this

$(document).ready(function(){ 
    $('#nav li a').click(function(e){  
        e.preventDefault();
        var toLoad = $(this).attr('href');
        $('#main').hide('fast', function(){  
            $('#main').load(toLoad, function(){
                $('#main').show('fast');
            });  
        });
    });
});

$('#main').hide('fast',loadContent); is hiding the div so need to show it again so I've used this $('#main').show('fast'); in load's callback function.