与标签菜单

Question

第二导航我这里有一个的jsfiddle - http://jsfiddle.net/s8sq38y8/2/

它的自举标签，其显示每个标签和标签下一个三角形，以显示选择哪个选项卡下的内容菜单。

我需要控制从另一个导航（第二个导航将在页面上的不同位置）的选项卡式菜单正在工作，但我也需要在单击第二个导航时将三角形移动到正确的选项卡。当使用第二个导航时，如何将三角形放置在红色菜单上的正确选项卡下。

Second Nav 
    <nav> 
     <ul class="top-nav" > 
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
    </nav> 

Answer 1

我可能不会让引导选项卡的JavaScript由您的顶部导航点击触发。这感觉是错误的。这可以通过删除data-toggle属性轻松完成。然后，我会添加几行js，将顶部导航中的点击委托给选项卡导航中的匹配链接。事情是这样的：

$('.top-nav a').on('click', function(e) { 
    var ariaControls = $(this).attr('aria-controls'); 
    $('.blocks').find('[aria-controls="' + ariaControls + '"]').click(); 
}) 

正如你可以看到，现在的三角形如下很好，因为这只是模仿实际标签上点击。 http://jsfiddle.net/s8sq38y8/4/