タブの切り替えカスタマイズについて

//ダイレクトリンク
$(function() {
	//location.hashで#以下を取得 変数hashに格納
		var hash = location.hash;	
		//hashの中に#tab～が存在するか調べる。
		hash = (hash.match(/^#tab\d+$/) || [])[0];
	   
		 //hashに要素が存在する場合、hashで取得した文字列（#tab2,#tab3等）から#より後を取得(tab2,tab3)	
	　　　　if($(hash).length){
		var tabname = hash.slice(1) ;
		} else{
	　　　　// 要素が存在しなければtabnameにtab1を代入する
	　　　　var tabname = "tab1";}
		//コンテンツを一度すべて非表示にし、
		$('.content_area').css('display','none');

		//一度タブについているクラスselectを消し、
		$('.tab_area li').removeClass('select');

		var tabno = $('ul.tab_area li#' + tabname).index();
		
		//クリックされたタブと同じ順番のコンテンツを表示します。
		$('.content_area').eq(tabno).fadeIn();
		
		//クリックされたタブのみにクラスselectをつけます。
		$('ul.tab_area li').eq(tabno).addClass('select')

		$('a').on('click', function() {
	var tabname = ($(this).attr('href').match(/#(tab\d+$)/) || [])[1];
	if (!tabname) {
		return;
	}

	//コンテンツを一度すべて非表示にし、
		$('.content_area').css('display','none');

		//一度タブについているクラスselectを消し、
		$('.tab_area li').removeClass('select');

		var tabno = $('ul.tab_area li#' + tabname).index();
		
		//クリックされたタブと同じ順番のコンテンツを表示します。
		$('.content_area').eq(tabno).fadeIn();
		
		//クリックされたタブのみにクラスselectをつけます。
		$('ul.tab_area li').eq(tabno).addClass('select')
})
	
			});

$(function() {
	//クリックしたときのファンクションをまとめて指定
	$('ul.tab_area li').click(function() {
		//.index()を使いクリックされたタブが何番目かを調べ、
//		indexという変数に代入します。
		var index = $('ul.tab_area li').index(this);

		//コンテンツを一度すべて非表示にし、
		$('.content_area').css('display','none');

		//クリックされたタブと同じ順番のコンテンツを表示します。
		$('.content_area').eq(index).fadeIn();

		//タブについているクラスselectを消し、
		$('.tab_area li').removeClass('select');

		//クリックされたタブのみにクラスselectをつけます。
		$(this).addClass('select')
	});
});

上記コードでうまく動作いたしました！ありがとうございます。
このトピでのコード記載の際のルール、よく知らなかったもので、失礼いたしました。
以後気をつけます。

上記コードで動作は問題ないので、いいのですが、
参考サイトの

$(function() {
	//クリックしたときのファンクションをまとめて指定
	$('ul.tab_area li').click(function() {
		//.index()を使いクリックされたタブが何番目かを調べ、
//		indexという変数に代入します。
		var index = $('ul.tab_area li').index(this);

		//コンテンツを一度すべて非表示にし、
		$('.content_area').css('display','none');

		//クリックされたタブと同じ順番のコンテンツを表示します。
		$('.content_area').eq(index).fadeIn();

		//タブについているクラスselectを消し、
		$('.tab_area li').removeClass('select');

		//クリックされたタブのみにクラスselectをつけます。
		$(this).addClass('select')
	});
});

これも入れないとタブが切り替わらないので、入れないといけないのですよね？
なんか二重に入れているような気がしまして。

あと、ヘッダーを固定にしているもので、ページ内アンカーするとヘッダーで隠れてしまうので、
下記コードで余白を持たせております。
別ページからはうまくヘッダーの高さ分、ずれて表示してくれるのですが、同ページからですと、
余白が入らないようです。これの対処は出来るものなのでしょうか？？

余白コード

jQuery( window ).on( 'load', function() {
  id    = location.hash;
  speed = 0;
  headerHight = 200; // 固定ヘッダーの高さ
  if ( '' != id ) {
    pos = jQuery( id ).offset().top - headerHight;
    jQuery( 'html' ).animate({ scrollTop: pos }, speed );
  }
});

はい。
長々とお付き合い、ありがとうございました！

余白の件は、他フォーラムで聞いてみます。