jQueryでタブ切り替え

#仕様
ごく普通のタブ。
#HTML
targetとtriggerにデータ属性を付与。

HTML

<ul>
  <li data-tab-trigger='tab'>kuma</li>
  <li data-tab-trigger='tab'>tama</li>
  <li data-tab-trigger='tab'>kiso</li>
</ul>
<ul>
  <li data-tab-target='tab'>球磨だクマー</li>
  <li data-tab-target='tab'>多摩だニャー</li>
  <li data-tab-target='tab'>木曽だキソー</li>
</ul>

#JS
引数でロード時にアクティブになるタブを何番目にするか指定。
(0からカウントが始まるので注意）

JQuery

var tabSwitch = function(active_num){
	var $trigger = $('[data-trigger-tab]'),
		$target  = $('[data-target-tab]'),
		$active;
	if(!$target.length) return;
	$target.addClass('is_Disable');
	$target.eq(active_num).removeClass('is_Disable');
	$trigger.eq(active_num).addClass('is_active');
	$trigger.on('click',function(){
		var num = $(this).index(),
			$active = $('.is_active'),
			hide_num = $active.index();
		$active.removeClass('is_active_tab');
		$target.eq(hide_num).addClass('is_Disable');
		$target.eq(num).removeClass('is_Disable');
		$trigger.eq(num).addClass('is_active');
	})
};
$(function(){
    tabswitch(0);
});

#CSS

css

.is_Disable {
  display:none;
}