Cacher is the code snippet organizer for pro developers

$('#tabs_holder li').click(function(){
    var clicked_tab = $(this);
    var number = clicked_tab.index();
    number = number + 1;
    console.log(number);

    $('#tabs_holder li').removeClass('active');
    clicked_tab.addClass('active');

    $('#content_holder li').removeClass('show');
    $('#content_holder li:nth-child(' + number + ')').addClass('show');
});

<ul id="tabs_holder">
    <li class="active col-md-4 tab1">Tab 1</li>
    <li class="tab2 col-md-4">Tab 2</li>
    <li class="tab3 col-md-4">Tab 3</li>
</ul>
<ul id="content_holder">
    <li class="show content1">Content 1</li>
    <li class="content2">Content 2</li>
    <li class="content3">Content 3</li>
</ul>

/* reset */
ul {margin:25px 0; padding:0; list-style:none; float:left; clear:both;}
ul li {float:left; display:block; width:50px; height:30px; background:blue; margin:5px; color:#FFFFFF; padding:10px; text-align:center;}

ul li.active {background:red;}

#content_holder li {display:none;}
#content_holder li.show {display:block;}