jQuery 激活具有多个链接的单个选项卡 - 同时在两个选项卡上设置活动类

Question

正如标题所示，我想制作一个选项卡界面，其中有多个链接控制同一选项卡面板。

希望您在查看示例时能明白我的意思： http://jsfiddle.net/kimatg/EtVZW/2/

这里一切正常，这些链接都运行良好，但一个问题是“活动”类（在本例中 .current）一次只能在一个选项卡选择器容器中工作...

换句话说，我有 2 个标签演示中的菜单（.map 和 .tabnav）；当我点击div.tabnav中的Region 2时，相应的a标签获取类.current，但相应的div.map 中的 a 标记则不然。

如何使两个 div 同时获取 .current 类，而不是在选择另一个选项卡时获取？

哦，顺便说一句，我在示例中使用了 jQuery 工具，但如果需要像 jQuery UI 那样以不同的方式实现它也没关系。

Answer 1

我不熟悉 jQuery 工具，所以我使用了 UI。

这是小提琴： http://jsfiddle.net/jomanlk/XwpDK/4/

基本上，我使用索引来突出显示正确的链接

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());
});