Bootstrap Tabs

Bootstrap Tabs

by seefeld

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<ul data-tabs="tabs" class="nav nav-tabs" id="tabs-links">
    <li class=""><a href="#alert">Active Alerts</a>

    </li>
    <li><a href="#addNew">New Alert</a>

    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="alert">tab1</div>
    <div class="tab-pane" id="addNew">tab2</div>
</div>

CSS

body {
    padding-top: 50px;
}

JavaScript

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