Button Group Active Class

by Adam Mendoza

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="btn-group">
            <button type="button" class="active btn btn-default" id="regi1">Left</button>
            <button type="button" class="btn btn-default" id="regi2">Middle</button>
            <button type="button" class="btn btn-default" id="regi3">Right</button>
</div>

CSS

body{padding:50px;}

.btn:active
{
  background-color:yellow;
}

.btn.active
{
  color: #333;
  background-color:red;
}

JavaScript

$(".btn-group > .btn").click(function(){
    $(".btn-group > .btn").removeClass("active");
    $(this).addClass("active");
});