Second navigation with tabbed menu - css

Question

I have a jsfiddle here - http://jsfiddle.net/s8sq38y8/2/
It's a bootstrap tabbed menu that displays content under each tab and a triangle under the tab to display which tab is selected.
I need to control the tabbed menu from another navigation which (the second nav will be in a different location on the page)is working but I need to also move the triangle to the correct tab when the second navigation is clicked. How can I place the triangle under the correct tab on the on thr red menu when the second nav is used.
Second Nav
<nav>
<ul class="top-nav" >
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</nav>

Answer 1

I would probably not let the bootstrap tab javascript be triggered by the clicks on your top navigation. It feels just wrong. This can easily be done by removing the data-toggle attribute. I would then add a few lines of js that would delegate a click in the top navigation to the matching link in the tab navigation. Something like this:
$('.top-nav a').on('click', function(e) {
var ariaControls = $(this).attr('aria-controls');
$('.blocks').find('[aria-controls="' + ariaControls + '"]').click();
})
As you can see, the triangle follows nicely now, as this just mimics a click on the actual tab. http://jsfiddle.net/s8sq38y8/4/