Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Yandy Viera

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li id="tab-1" role="presentation" class="active"><a href="#one" aria-controls="one" role="tab" data-toggle="tab">One</a></li>
    <li id="tab-2" role="presentation"><a href="#two" aria-controls="two" role="tab" data-toggle="tab">Two</a></li>
    <li id="tab-3" role="presentation"><a href="#three" aria-controls="three" role="tab" data-toggle="tab">Three</a></li>
    <li id="tab-4" role="presentation"><a href="#four" aria-controls="four" role="tab" data-toggle="tab">Four</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="one">1</div>
    <div role="tabpanel" class="tab-pane" id="two">2</div>
    <div role="tabpanel" class="tab-pane" id="three">3</div>
    <div role="tabpanel" class="tab-pane" id="four">4</div>
  </div>

</div>

CSS

body {
    background-color:gold;
    padding:15px;
}

JavaScript

$('[id*="tab-"]').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
    
    if(this.id=="tab-1"){
        $('body').css('background', 'red');
    }
    else if(this.id=="tab-2"){
        $('body').css('background', 'green');
    }
    else if(this.id=="tab-3"){
        $('body').css('background', 'blue');
    }
    else if(this.id=="tab-4"){
        $('body').css('background', 'purple');
    }
});