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