引導程序切換選項卡的內容中的鏈接不突出顯示活動選項卡

我試圖鏈接到選項卡內容中的另一個選項卡。該鏈接切換標籤很好，但舊標籤仍然突出顯示爲活動。我怎樣才能正確地做到這一點？引導程序切換選項卡的內容中的鏈接不突出顯示活動選項卡

<div class="container"> 
    <h2>Dynamic Tabs</h2> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
     <a data-toggle="tab" href="#menu1">This link opens Menu 1</a> 
    </div> 
    </div> 
</div>

演示：點擊菜單3，那麼「菜單1」的內容鏈接： https://jsfiddle.net/sua8fmpm/

來源

2017-06-29 Ted Scheckler

您需要刪除從「片3」「活動」類，並把它添加到「標籤1'，當你點擊你的鏈接。

你可以通過點擊你自己的代碼（例如jQuery）或使用引導標籤（'show'） - 更多信息here，它說：「選擇給定的標籤並顯示其關聯的內容。先前選擇的內容將被取消選中，並且其相關內容將被隱藏。「

像這樣的事情

$("#activate-tab-1").click(function(){ 
    $("#tab-1").tab('show'); 
});

演示：https://jsfiddle.net/0nqx1fyv/1/

來源

2017-06-29 17:58:44 Olenka

好的，謝謝......我希望有一個非jQuery的方法......但是這會做。 –

我相信他們的默認行爲在這種情況下不起作用，並且不會正確地移除/添加活動類，因爲tab.js希望'data-toggle'元素位於nav-tabs部分或其他內容中。這就是爲什麼你必須自己做 – Olenka

引導程序切換選項卡的內容中的鏈接不突出顯示活動選項卡

回答

相關問題