Bootstrap: jump to tab on same page

For http://stackoverflow.com/questions/15360112/jump-to-specific-tab-from-another-tab-with-bootstraps-nav-tabs/15365279#15365279

by serra

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#home" data-toggle="tab">Home</a>
        </li>
        <li><a href="#profile" data-toggle="tab">Profile</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active in" id="home">
            <form id="tab">
                <label>Name:</label>
                <input type="text" value="fooBar" class="input-xlarge"></input>
            </form>
        </div>
        <div class="tab-pane fade" id="profile">
            <form id="tab2"> <a href="#" id="gotohome">Jump to home tab (this works)</a> 
                <br /> <a href="#home" data-toggle="tab">Home using data-toggle (sadly does not change active tab)</a>

            </form>
        </div>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');
 .container {
    margin-top: 10px;
}

JavaScript

$('#gotohome').click(function () {
    $('#myTab a[href="#home"]').tab('show');
});