サンプル
上記のようなシンプルなタブ切り替えはjQueryのプラグインなしで簡単に実装できます。

ソース

【CSS】

ul {
　　list-style:none;
}

ul.tabbox li {
　　float:left;
　　width:25%;
　　height:40px;
　　line-height:40px;
　　border:1px solid #c0c0c0;
　　text-align:center;
　　cursor:pointer;
　　box-sizing: border-box;
}

ul.textbox {
　　width:100%;
　　border:1px solid #c0c0c0;
　　box-sizing: border-box;
　　height:200px;
　　padding:10px;
}

ul.textbox li {
　　display:none; /* ① */
}

ul.textbox li.hide {
　　display:block
}

.clearfix:after {
　　content: ".";
　　display: block;
　　height: 0;
　　font-size: 0;
　　clear: both;
　　visibility: hidden;
}

.selected {
　　background-color:#000;color:#fff;
}

【HTML】

<div class="clearfix">
　　<ul class="tabbox clearfix">
　　　　<li class="selected">タブ1</li>
　　　　<li>タブ2</li>
　　　　<li>タブ3</li>
　　　　<li>タブ4</li>
　　</ul><!-- tabbox -->

　　<ul class="textbox clearfix">
　　　　<li class="hide">内容1</li>
　　　　<li>内容2</li>
　　　　<li>内容3</li>
　　　　<li>内容4</li>
　　</ul><!-- textbox -->
</div>

【javascript】

$(function(){ 
    $('ul.tabbox > li').on('click',function(){
        var index = $('ul.tabbox > li').index(this);
	$('ul.tabbox > li').removeClass('selected'); //②
	$(this).addClass('selected'); //③
	$('ul.textbox > li').removeClass('hide'); //④
	$('ul.textbox > li').eq(index).addClass('hide'); //⑤
    }); 
});

説明

簡単に解説すると、①でtextboxの非表示の分をdisplay:noneで非表示にします。
②でtabboxのliに付与されたclass「selected」をすべて削除します。
そして③でクリックされてたliに「selected」を付与します。
同じく
④でtextboxのclass「hide」をすべて削除し、⑤でクリックされた順番のliに「hide」を付与させて表示させます。