jQuery BBQ Implementation

jQuery BBQ Implementation

I'm trying o use jQuery BBQ to load content onto my website without reloading, although i cant seem to get it to work at all. I'm not sure what must be changed in order for the code to work with my HTML. How can i implement the following jQuery BBQ code with my navigation bar? 

  2. <ul id="navigation-links">
  3.       <li><a href="#product-showcase">Product Showcase</a></li>
  4.       <li><a href="#about-us">About Us</a></li>
  5.       <li><a href="#about-me">About Me</a></li>
  6. </ul>
  7. <div id="content-loads-here"></div>


  10. AJAX 


  14. $(function(){
  15.   
  16.   // Keep a mapping of url-to-container for caching purposes.
  17.   var cache = {
  18.     // If url is '' (no fragment), display this div's content.
  19.     '': $('.bbq-default')
  20.   };
  21.   
  22.   // Bind an event to window.onhashchange that, when the history state changes,
  23.   // gets the url from the hash and displays either our cached content or fetches
  24.   // new content to be displayed.
  25.   $(window).bind( 'hashchange', function(e) {
  26.     
  27.     // Get the hash (fragment) as a string, with any leading # removed. Note that
  28.     // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
  29.     var url = $.param.fragment();
  30.     
  31.     // Remove .bbq-current class from any previously "current" link(s).
  32.     $( 'a.bbq-current' ).removeClass( 'bbq-current' );
  33.     
  34.     // Hide any visible ajax content.
  35.     $( '#content-container' ).children( ':visible' ).hide();
  36.     
  37.     // Add .bbq-current class to "current" nav link(s), only if url isn't empty.
  38.     url && $( 'a[href="#' + url + '"]' ).addClass( 'bbq-current' );
  39.     
  40.     if ( cache[ url ] ) {
  41.       // Since the element is already in the cache, it doesn't need to be
  42.       // created, so instead of creating it again, let's just show it!
  43.       cache[ url ].show();
  44.       
  45.     } else {
  46.       // Show "loading" content while AJAX content loads.
  47.       $( '.bbq-loading' ).show();
  48.       
  49.       // Create container for this url's content and store a reference to it in
  50.       // the cache.
  51.       cache[ url ] = $( '<div class="bbq-item"/>' )
  52.         
  53.         // Append the content container to the parent container.
  54.         .appendTo( '#content-container' )
  55.         
  56.         // Load external content via AJAX. Note that in order to keep this
  57.         // example streamlined, only the content in .infobox is shown. You'll
  58.         // want to change this based on your needs.
  59.         .load( url, function(){
  60.           // Content loaded, hide "loading" content.
  61.           $( '.bbq-loading' ).hide();
  62.         });
  63.     }
  64.   })
  65.   
  66.   // Since the event is only triggered when the hash changes, we need to trigger
  67.   // the event now, to handle the hash the page may have loaded with.
  68.   $(window).trigger( 'hashchange' );
  69.   
  70. });