CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrapcssnavigation
Lihkinisak
Lihkinisak

Reputation: 749

Bootstrap nav, nav pills, nav stacked is independent for two UL lists.

I have the following code with two ul elememts inside the div with nav, nav-pills, nav-stacked classes to each.

    <div >  
    <ul class="nav nav-pills nav-stacked ">
        <li class="active"><a href="#allSection" data-target="#allSectionOptions" data-toggle="tab">All</a></li>
        <li ><a href="#pendingSection" data-target="#allSectionOptions" data-toggle="tab">Pending</a></li>
    </ul>

    <ul class="nav nav-pills nav-stacked ">
        <li ><a href="#khGroupSec" data-target="#groupSectionOptions" data-toggle="tab">Kindred Hospital</a></li>
        <li ><a href="#lhGroupSec" data-target="#groupSectionOptions" data-toggle="tab">Logan Heights</a></li>
    </ul>
    </div>

html view of nav tabs

My problem here is the active css class for these tabs are independed. When I select a tab from one group of UL li, the previously selected active tab from other Ul li does not deactive or loose 'active' css class.

How can I make them dependend. I want the previously active tabs in both UL list to deactivate regardless of what ever tab is clicked and the only the last clicked tab should be active.

Thanks all for the help!

Upvotes: 0

Views: 1122

Answers (1)

mesertes
mesertes

Reputation: 346

I'm not exactly sure what your situation is or what you're trying to accomplish in terms of the functionality of the tabs, but I have two possible solutions for you.

First, if you don't need two separate , you can simply add a visual separator between the lists. This will leverage the built-in Bootstrap Tab behavior in the way you are looking for, I believe.

<ul class="nav nav-pills nav-stacked ">
    <li class="active"><a href="#allSection" data-target="allSection" data-toggle="tab">All</a></li>
    <li><a href="#pendingSection" data-target="pendingSection" data-toggle="tab">Pending</a></li>
    <li role="separator" class="divider">&nbsp;</li>
    <li><a href="#khGroupSec" data-target="khGroupSec" data-toggle="tab">Kindred Hospital</a></li>
    <li><a href="#lhGroupSec" data-target="lhGroupSec" data-toggle="tab">Logan Heights</a></li>
</ul>

Second, if you need the in different locations, you can use the Bootstrap Tab events to catch when a tab is activated and manually deactivate the tabs in the linked list. I set up a jsfiddle to give you an example of what I mean: https://jsfiddle.net/az329fuw/

Upvotes: 1

Related Questions