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)

Answer 2

" $('#news').load('/fetch-content?tab=news', function() { "

after adding this line of code, unfortunetely tabs dont' work. I'm really newbie... Maybe I'm supoused to change this : "/fetch-content?tab=news" ?? sory for such silly questions... I will be glad if you will provide full answer... thanks.

Answer 3

Good tips! Thanks

$('.menu > li').filter(':not(#news)').removeClass('active');