Bootstrap下拉菜單+選項卡無法正常工作

Question

我有一個頁面，我正在使用boostrap的「下拉」和「選項卡」功能。下面是我的代碼看起來像

<div class="dropdown" id="dropdown-tabs"> 
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
Select an Option <span class="caret"></span> 
</a> 
<ul class="dropdown-menu"> 
    <li class="active"><a href="#one" data-toggle="tab">Option 1</a></li> 
<li><a href="#two" data-toggle="tab">Option 2</a></li> 
<li><a href="#three" data-toggle="tab">Option 3</a></li> 
</ul> 
</div> 

和附帶的JavaScript（使用jQuery v1.10.2的）

$(function() { 
$('#dropdown-tabs a').click(function (e) { 
    e.preventDefault(); 
    $('a[href="' + $(this).attr('href') + '"]').tab('show'); 
    $(this).parent().removeClass('active'); 
    }) 
}); 

不幸的是，當選擇一個下拉的項目，以前選擇的項目沒有「取消」（即李風格仍然「活躍」）

這裏的問題是什麼樣子：

http://jsfiddle.net/alpineElephant/L9x4d/

我已經費盡我的大腦在這個非常具體的問題了大約兩個小時，現在，淘過谷歌，計算器，自舉的文件，等等。我在這裏錯過了非常明顯的東西嗎？

Answer 1

以下內容添加到您的腳本：

$('.dropdown-menu a').click(function (e) { 
    $('.active').removeClass('active'); 
}); 

JSFiddle