Question

as the title says, I want to make a tab interface where I have multiple links that control the same tab panel.

Hopefully you’ll get what I mean when you look at the example:
http://jsfiddle.net/kimatg/EtVZW/2/

Here everything works just fine and the links all work well, but one problem is that the “active” class (in this case .current) will only work in one tab-selector-containers at a time…

In other words, I have 2 tab menus (.map and .tabnav) in the demo; when I click Region 2 in div.tabnav, the corresponding a tag gets class .current, but the corresponding a tag in div.map doesn’t.

How can I make both divs get .current classes at the same time and not when another tab is selected?

Oh and by the way I used jQuery Tools in the example, but It’s fine if there’s a need to implement it a different way like jQuery UI.

Answer 1

I’m not familiar with jQuery Tools so I used UI.

Here’s the fiddle : http://jsfiddle.net/jomanlk/XwpDK/4/

Basically, I used the index to highlight the proper link

var $tabs = $('#tabs').tabs({
    select : function(event, ui) {
        var selected = $tabs.tabs('option', 'selected'); 
        $('a').removeClass('highlight');
        $('a').eq(ui.index).addClass('highlight');
    }
});

$('.map a:first').addClass('highlight');
$('.map a').click(function(){
    $tabs.tabs( "select" , $(this).index());
});