CODEWITHSUNDEEP
csstwitter-bootstrapmenu
duckhill
duckhill

Reputation: 21

Second navigation with tabbed menu

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"><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>

Upvotes: 0

Views: 101

Answers (1)

Pevara
Pevara

Reputation: 14310

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/

Upvotes: 1

Related Questions