Bootstrap導航，導航藥丸，導航堆疊是兩個UL列表獨立的。

我有以下兩個ul元素內的代碼與導航，導航藥丸，導航堆疊類到每個div的代碼。Bootstrap導航，導航藥丸，導航堆疊是兩個UL列表獨立的。

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

這裏我的問題是有效的CSS類這些選項卡independed。當我從一個UL li組中選擇一個選項卡時，以前從其他UI li選擇的活動選項卡不會失活或失去「活動」css類。

我該如何讓他們依賴。我希望UL列表中以前的活動選項卡停用，無論點擊哪個選項卡，並且只有最後一次點擊的選項卡應該處於活動狀態。

謝謝大家的幫助！

來源

2015-11-06 Lihkinisak

我不完全確定你的情況是什麼或者你試圖完成的選項卡的功能，但我有兩種可能的解決方案。

首先，如果您不需要兩個單獨的，您可以簡單地添加列表之間的可視分隔符。我相信，這會利用內置的Bootstrap Tab行爲，以您所尋找的方式。

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

第二，如果你需要在不同的位置，你可以使用Bootstrap Tab events當標籤被激活來捕捉和手動鏈表關閉的選項卡。我建立了一個jsfiddle給你一個我的意思的例子：https://jsfiddle.net/az329fuw/

來源

2015-11-06 22:21:05 mesertes

第二種解決方案是完美的，手動停用標籤是我猜的解決方案。我看到了幾個例子，這些功能是在獨立的ul列表中自動實現的。 http://bootply.com/101379我不知道它在那裏如何工作。第一個解決方案不適用，因爲我需要根據所需的UI設計使用兩個單獨的ul。感謝您的解決方案。 – Lihkinisak

Bootstrap導航，導航藥丸，導航堆疊是兩個UL列表獨立的。

回答

相關問題