Bootstrap dropdown menu+tab not functioning properly

Question

I have a page where I am utilizing both the "dropdown" and "tabs" features of boostrap. Here's what my code looks like

<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>

and the accompanying javascript(using 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")

Here's what the problem looks like:

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

I've been racking my brain over this very specific issue for about two hours now, scouring over google, stackoverflow, the boostrap documentation, and so on. Am I missing something really obvious here?

Answer 1

Add the following to your script:

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

JSFiddle