【別ページからダイレクトリンクしてきた際、コンテンツだけでなく、タブのカレント表示機能を一緒に切り替えさせたい】

Question

前提・実現したいこと

別ページから（タブコンテンツページへ）ダイレクトリンクして飛んできた際、
コンテンツだけでなく、タブのカレント表示機能を一緒に切り替えさせたいです。

発生している問題・エラーメッセージ

例えば、タブが３つ並んでいて、
別ページから「～.html#tab3」とした場合、
コンテンツ内容はタブ３のものに切り替わるのですが
タブタイトルに付けたカレント機能がタブ１のまま表示されてしまいます。

該当のソースコード

var addEvent = function() {
  $tabs.find('a').on('click', function(e) {
    var href = $(this).attr('href'); // 1
    var $targetContent = $(href); // 1

    // 2
    if ($(this).hasClass(TAB_ACTIVE_CLASS)) {
      return false;
    }

    // 3
    $tabs.find('a').removeClass(TAB_ACTIVE_CLASS);
    $content.removeClass(CONTENT_SHOW_CLASS);

    // 4
    $(this).addClass(TAB_ACTIVE_CLASS);
    $targetContent.addClass(CONTENT_SHOW_CLASS);
	  
// 現在のcurrentクラスを削除
    $(".current").removeClass("current");
     
    // 選択されたタブ（自分自身）にcurrentクラスを追加
    $(this).addClass("current");
	  
    return false;
  });
};

jQuery初心者のため、知識不足なところもあり大変恐縮です。
普段切り替える分には問題なくコンテンツ内容とタブのカレント表示機能は一致するのですが
別ページにリンクを貼って飛ばせた際に出る現象の解決策が思いつきません汗
何の指定を追加すれば宜しいのか・・どなたかご教授お願いします＞＜

Comments

[m.ts10806]

「至急」はやめましょう。それで離れる回答者も少なくありません。（私は指摘だけして去ります）
それにコード部分が平で貼ってあったり、推奨される書き方をしていません。
急がば回れ。
https://teratail.com/help/question-tips#questionTips3-7
https://teratail.com/help/question-tips#questionTips3-8

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、「別ページから」来た際の切り替えについてのコードが提示されていません。

[Lhankor_Mhy]

『別ページから「～.html#tab3」とした場合、コンテンツ内容はタブ３のものに切り替わる』とのことですが、ご提示の内容だけではそうならないのではないかと思います。
ロードイベント部分とHTMLもご提示ください。

Answer 1

<!-- タブ（調整前html） --> <div class="all_area"> <ul class="tabs"> <li><a href="#tab1" class="select"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> <!-- タブ（調整後html） --> <div class="all_area"> <ul class="tabs"> <li id="tab1" class="select"><span>タブ1</span></li> <li id="tab2"><span>タブ2</span></li> <li id="tab3"><span>タブ3</span></li> </ul> <!-- コンテンツ内容html --> <div id="anchor1" class="tab-content"> <div class="content_space clearfix"> <p>コンテンツ内容が入りますコンテンツ内容が入りますコンテンツ内容が入ります</p> </div> </div> <!-- 動作関連css -->

.tabs {
overflow:hidden;
display: table;
table-layout: fixed;
width: 100%;
margin:0;
padding:0;
list-style: none;
}

.tabs li {
display: table-cell;
width: 32%;
text-align: center;
color: #FFF;
text-decoration: none;
font-weight: bold;
padding: .5em;
background: #0E8351;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: 1px solid #005b34;
cursor: pointer;
}

.tabs li span {
display: block;
padding: 10px 0 10px;
cursor: pointer;
}

.tabs li.select{
border-bottom:none;
background: #FFF;
color:#0E8351;
}

<!-- 調整後のjs -->

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

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

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

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

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

$(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";}
//コンテンツを一度すべて非表示にし、
$('.tab-content').css('display','none');

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

var tabno = $('ul.tabs li#' + tabname).index();

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

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

＊＊＊＊＊

<a>タグを外し、リストタグへ直にクラス指定して飛ばせる仕様にjsを調整、試行錯誤を繰り返した結果、思い通りの動作に自己解決できました！お騒がせしました・・・汗