$(function(){
var $tabs = $('.tabArea li');
var $contents = $('.tabAreaInner');
		
		$('.tabTop li').each(function(i){
			$(this).attr('id', 'btn' + (i+1));
		});
		$('.tabBottom li').each(function(i){
			$(this).attr('id', 'btn' + (i+1));
		});

		$('.tabAreaInner').each(function(i){
			$(this).attr('id','tabAreaInner' + (i+1));
		});

function changeTab(tabId) {
  var $currentPage = $contents.filter(':visible');
  var $targetPage = $contents.filter('#tabAreaInner' + tabId);
  
  $currentPage.hide();
  $targetPage.show();

  $tabs.removeClass('on');
  $tabs.filter('#btn' + tabId).addClass('on');
}

$tabs.click(function() {
  changeTab($(this).attr('id').slice(3));
  });
});