Bootstrap下拉菜单+选项卡无法正常运行

Question

我有一个页面，我正在使用＆＃34;下拉＆＃34;和＆＃34;标签＆＃34; 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');
    })
});

不幸的是，当选择下拉项时，之前选择的项目不会取消选择＆＃34; （即李式仍然是'＃34;活跃＆＃34;）

这是问题所在：

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

我现在在这个非常具体的问题上绞尽脑汁待了大约两个小时，搜索了google，stackoverflow，boostrap文档，等等。我错过了一些非常明显的东西吗？

Answer 1

将以下内容添加到您的脚本中：

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

JSFiddle