Bootstrap Tests

by Joe Saad

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<form action="" class="navbar-form navbar-left">
    <label for="control1">Control 1
        <input type="text" id="control1" class="form-control" />
    </label>
</form>
<ul class="nav nav-tabs" role="tablist" id="myTab">
    <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a>
    </li>
    <li><a href="#profile" role="tab" data-toggle="tab">Profile</a>
    </li>
    <li><a href="#messages" role="tab" data-toggle="tab">Messages</a>
    </li>
    <li><a href="#settings" role="tab" data-toggle="tab">Settings</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">Home</div>
    <div class="tab-pane" id="profile">Profile</div>
    <div class="tab-pane" id="messages">Messages</div>
    <div class="tab-pane" id="settings">Settings</div>
</div>

JavaScript

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});