Load in external .html file with jQuery

I'm trying to create a website with tabbed browsing and have followed a tutorial to make this. But the problem is that the code I'm currently is using doesent work as expected.

• HTML-code: http://pastebin.com/CG146NS3

• CSS-code: http://pastebin.com/4VCuAwJm

• JavaScript: http://pastebin.com/sZhhQs6v

The tutorial I followe开发者_如何学编程d: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

The problem: When I click one of the tabs the #content goes away with a slideUp and .load loads the content but it doesent place the content in #content.

1. You have some duplicate #ids.

2. Remember when you do:

   var toLoad = $(this).attr('href')+' #content';
   // other execution
   function loadContent() {
      $('#content').load(toLoad,function(){
      $('#content').slideDown('normal');
   });
   

you are actually loading a page fragment #content into #content in your page. So you end up with this:

<div id='content'>
   <div id='content'>Random Data</div>
</div>

Okay, based on your comment..Just make sure that you actually have a DIv with ID #content in your random html files.