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/

带标签菜单的第二个导航

1 个答案: