2014-03-01 87 views
1

我想使用具有淡入淡出效果的Bootstrap的可切換選項卡(http://getbootstrap.com/javascript/#tabs)。當我創建一個靜態HTML文件時,這很好。從動態添加的選項卡中刪除淡入淡出效果

但是,當通過jQuery動態添加標籤時,fade類將從相應的DOM節點中刪除,並且在切換標籤頁時,標籤窗格不再淡入和淡出。我可以使用瀏覽器的開發人員工具(Chrome中的「元素」)將fade類重新添加到選項卡窗格中,以使其再次按預期工作。所以我真的不清楚爲什麼fade類被刪除。 ?:(

什麼我必須這樣做的fade類不會被刪除插入選項卡窗格時

繼小提琴演示了此問題:http://jsfiddle.net/zabbarob/44VDD/

我的小提琴使用的代碼

<div id="tabs"> 
    <ul class="nav nav-tabs"></ul> 
    <div class="tab-content"></div> 
</div> 

​​

回答

1

由此產生的html標記缺少幾件事情可以工作。

1)現在你給每個div元素fade in類,但只是活動的一個需要它,其他每個需要的只是fade類。

2)你是不是在導航列表中聲明的有源元件

3)你是不是標誌着內容區域

working example

在我的例子中,有源元件爲活動我選擇第一個元素作爲通過計數器標記爲有效的元素。修改您的功能(呼叫),以便它適合您的需求。調用你的函數的第一個元素現在被標記爲活動的。

+0

太棒了!這不僅解決了我的問題:-)還讓我明白我做錯了什麼!非常感謝! – zabbarob

+0

歡迎您,很高興我能提供幫助。 :) – Sebsemillia