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');
    })
});

Unfortunately, when a dropdown item is selected, the previously selected items do not "deselect" (ie the li style remains "active")

这是问题的样子：

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

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

Answer 1

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

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

JSFiddle