loading the content after click yensdesign tabbed menu

Question

I've used this tutorial: http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/

it is yensdesign tabbed menu. Could sb tell me how do I have to change the code to load content of particular tab after clicking on this tab?

Answer 1

Working with the js, you want to change each case to something like:

case 'news':
  $('#news').load('/fetch-content?tab=news', function() {
    $("#news").addClass("active");
    $("#tutorials").removeClass("active");
    // .. etc ..
  });

There are loads of variations on this - maybe you want to make the tab active before loading the content go give the user immediate feedback in case your server takes a few seconds to respond.

Also, the addClass/removeClass stuff in the tabs.js file doesn't scale too well. It'd be better to select all divs, then filter out the ones you're not interested in, e.g.:

$('#tabs > div').filter(':not(#news)').removeClass('active');

(something like that anyway)