jQuery tabs - multiple sets on on page
- by Jonny Wood
This is kind of a follow on from a previous question I posted but I've not been able to get it to work..
I'm trying to use multiple sets of tabs (jQuery) on one page.
This is the code I had for one set of tabs which works great:
$('div.tabs div.tab').hide();
$('div.tabs div:first').show();
$('div.tabs ul.htabs li:first a').addClass('current');
$('div.tabs ul.htabs li a').click(function(){
$('div.tabs ul.htabs li a').removeClass('current');
$(this).addClass('current');
var currentTab = $(this).attr('href');
$('div.tabs div.tab').hide();
$(currentTab).show();
return false;
});
To use more than one set on the page I assigned #id's to each tab-set and tried to impliment this with:
$.each(['#tabs-1', '#tabs-2', '#tabs-3' ], function(id) {
$(id + 'div.tab').hide();
$(id + 'div:first').show();
$(id + 'ul.htabs li:first a').addClass('current');
$(id + 'ul.htabs li a').click(function(){
$(id + 'ul.htabs li a').removeClass('current');
$(this).addClass('current');
var currentTab = $(this).attr('href');
$(id + 'div.tab').hide();
$(currentTab).show();
return false;
});
});
Obviously I'm doing something wrong here but as a jQuery newcomer I'm stumped!
