Bootstrap Active Classes

Twitter Bootstrap example of assigning the active class on click and removing the active class from non active tabs.

by chapmanc

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script>
<div class="container">
    <div class="hero-unit">
        <h1>Bootstrap jsFiddle Skeleton</h1>
        <p>Fork this fiddle to test your Bootstrap stuff.</p>
        <p>
            <a class="btn btn-primary btn-large" href="http://twitter.github.com/bootstrap/index.html" target="_blank">
                Learn more about Bootstrap
            </a>
        </p>
    </div>
    <ul id="tabList" class="nav nav-tabs">
      <li><a href="#home" data-toggle="tab">Home</a></li>
      <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>
</diV>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}

JavaScript

$('#tabList li').click(function() {
    $('#tabList li').each(function() {
       $(this).removeClass('.active');
    })
    $(this).addClass('.active');
     alert($(this).text());
})
$('#tabList li').each(function() {
    if ($(this).is(".active")) {
        alert($(this).text());
    };
})