Bootstrap Tabs with Internal Links

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<div class="container">
    <div class="row">
        <div class="span12">
            <ul class="nav nav-tabs" id="myTabs">
              <li class="active"><a id="tab-1" href="#one" data-toggle="tab">TAB #1</a></li>
              <li><a href="#two" id="tab-2" data-toggle="tab">TAB #2</a></li>
              <li><a href="#three" id="tab-3" data-toggle="tab">TAB #3</a></li>
            </ul>
            
            <div class="tab-content">
              <div class="tab-pane active" id="one">
                  <p>You're in Tab #1</p>
                  <p><a href="#tab-2">Go to Tab #2</a></p>
                  <p><a href="#tab-3">Go to Tab #3</a></p>
                </div>
              <div class="tab-pane" id="two">
                  <p>You're in Tab #2</p> 
                </div>
              <div class="tab-pane" id="three">
                  <p>Now #3.</p>
                  <p><a href="#tab-1">Back to Tab #1</a></p>
                  <p><a href="#fail">This should fail.</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

a {
    cursor:pointer;
}

JavaScript

$("a").on('click', function() {
        var href = $(this).attr('href');
        var id = href.replace("#", "");
        if ($("a[data-toggle='tab'][id='" + id + "']")) {
            $("#" + id).click();        
        }
    });