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 data-tab-destination="tab-2">Go to Tab #2</a></p>
          <p><a data-tab-destination="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 data-tab-destination="tab-1">Back to Tab #1</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

a {
  cursor: pointer;
}

JavaScript

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