css - 带有选项卡式菜单的第二个导航

Question

我这里有一个 jsfiddle - http://jsfiddle.net/s8sq38y8/2/

这是一个 Bootstrap 选项卡式菜单，在每个选项卡下显示内容，并在选项卡下显示一个三 Angular 形以显示选择了哪个选项卡。

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

    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

我可能不会让 bootstrap 选项卡 javascript 被顶部导航上的点击触发。感觉不对。这可以通过删除 data-toggle 属性轻松完成。然后我会添加几行 js，将顶部导航中的单击委托(delegate)给选项卡导航中的匹配链接。像这样:

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

如您所见，三 Angular 形现在很好地跟随，因为这只是模仿实际选项卡上的点击。 http://jsfiddle.net/s8sq38y8/4/