Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<ul id="n_tab" class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab">1st</a></li>
    <li><a href="#bbb" data-toggle="tab">2nd</a></li>
    <li><a href="#ccc" data-toggle="tab">3rd</a></li>
    <li><a href="#ccc" data-toggle="tab">4th</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css');

.container {
    margin-top: 10px;
}
.redcol > a {
 color: red;
}

JavaScript

function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
$("#n_tab li a").click(function() {
    $(this).parent().prevAll().addClass('redcol');
    $(this).parent().nextAll().removeClass('redcol');

    });