Bootstrap 3 - Tabs

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container">
    
    <!-- Nav tabs -->
    <ul id="mytabs" class="nav nav-tabs" role="tablist">
      <li class="active">
          <a href="#first" role="tab" data-toggle="tab">
              <icon class="fa fa-home"></icon> First tab
          </a>
      </li>
      <li><a href="#second" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Second tab
          </a>
      </li>
      <li>
          <a href="#third" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Third tab
          </a>
      </li>
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade active in" id="first">
          <h2>First tab</h2>
          <button type="button" id="changetabbutton" class="btn btn-primary">Set second tab</button>
      </div>
      <div class="tab-pane fade" id="second">
          <h2>Second tab</h2>
      </div>
      <div class="tab-pane fade" id="third">
          <h2>Third tab</h2>
      </div>
    </div>
    
</div>

JavaScript

$(function(){

    $('#changetabbutton').click(function(e){
    	e.preventDefault();
        $('#mytabs a[href="#second"]').tab('show');
    })

})