gtタブのデフォルトの表示設定

Question

JQueryでタブの操作をコントロールするコードを書いております。

デフォルトで開くタブをhtml上でselectをつけることで固定したいのですが、なぜかselectをつけていないタブがデフォルトで開かれてしまいます。

どなたかわかる方いらっしゃらないでしょうか？

なおこのコードはタブだけでなく、違うページからリンクしてきたときに特定のタブを指定できるようにしており、かつページ内ジャンプの機能もはいっております。

現状ではページを普通に開いてもタブ5が選択された状態でひらいてしまいます。
タブ1が選択された状態で開きたいとおもっているのですが、、

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

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

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

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

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

    var urlParam = location.search.substring(1);
    if(urlParam) {
        var param = urlParam.split('&');
        var paramArray = [];
        for (i = 0; i < param.length; i++) {
            var paramItem = param[i].split('=');
            paramArray[paramItem[0]] = paramItem[1];
        }

        if(paramArray.hash.length){
            var tabname = paramArray.hash;
        }else{
            var tabname = "tab1";
        }
    }

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

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

    var tabno = $('.tab_area button#' + tabname).index();

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

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

    if(paramArray.anc.length){
        var ancname = paramArray.anc,
            ancOffset = $('#' + ancname).offset().top;

        if(ancOffset){
            $('html,body').animate({scrollTop: ancOffset}, 400);
        }
    }

});

        <div class="tab tab_area">
            <button id="tab1" class="tablinks select">
                タブ１
            </button>
            <button id="tab2" class="tablinks">
                タブ2
            </button>
            <button id="tab3" class="tablinks">
                タブ3
            </button>
            <button id="tab4" class="tablinks">
                タブ4
            </button>
            <button id="tab5" class="tablinks">
                タブ5
            </button>
        </div>
        <!-- Tab content -->

↓こちらのtabの中身がcontent_areaになります。

追記// 8月12日
文章でうまく説明できていないようですので、Githubのリンクを貼りました。
https://github.com/nannantown/new-tab

cssのhtmlも入っておりますので、どなたかみていただけないでしょうか？
問題としてはtab2.htmlを開いたときにtab3がひらかれてしまうということです。

Comments

[yambejp]

content_areaがなんだかわかりません

[namihana]

本文に追記いたしました！

[m.ts10806]

CSSも提示願います。

[namihana]

cssも含めたgithubのリンクを追記いたしました。ご確認くださいませ。

Answer 1

<script>
$(function() {
  $('.tablinks').on('click',function() {
    var index = $('.tablinks').index(this);
    $('.tablinks').removeClass('select');
    $(this).addClass('select')
    $('.content_area').hide().eq(index).show();
  }).filter('.select').trigger('click');
});
</script>
<style>
.select{color:red}
</style>
<div class="tab tab_area">
<button class="tablinks select">タブ1</button>
<button class="tablinks">タブ2</button>
<button class="tablinks">タブ3</button>
<button class="tablinks">タブ4</button>
<button class="tablinks">タブ5</button>
</div>
<div>
<div class="content_area">content1</div>
<div class="content_area">content2</div>
<div class="content_area">content3</div>
<div class="content_area">content4</div>
<div class="content_area">content5</div>
</div>

Comments

[namihana]

$('.content_area').hide().eq(index).show();
}).filter('.select').trigger('click');
の箇所をこちらのコードに追記してみたのですがうまく動作しませんでした。
githubのURLを追記いたしましたので、もしよろしければ実際のコード上でみていただけないでしょうか。。
まだまだ初心者なので理解ができていないところが多くすみませんが、、