リンクのクリック時に、リンク内に含まれるIDまで移動させたいです（Bootstrapのタブを使用しています）。お客様からご意見を頂いたものの反映させられず大変困っております。

Question

###やりたいこと
現在、Bootstrapで作ったタブが２つ（「詳細」と「報告」）あります。
報告が投稿されたときに、メールでお知らせがいきます。

そのメールに記載されたリンクをクリックをした場合に限り、
報告タブを開き、そこまでスクロールさせたいです。

例
https://aaa.com/event1#houkoku
といったアドレスを作り、IDがhoukokuのタブを開き、そこまで飛ばせたいです。

###つまずきポイント
そもそも”リンクをクリックしたときに"という限定が上手くいきません????

$('#event_show_houkoku').on('click',function()

と記載してもスクリプトが動作しませんでした????
どこを直せばよいのでしょうか？？

###JS

$(function(){
    var url = window.location.href;
    var activeTab = url.substring(url.indexOf("#") + 1);
    $('a').removeClass("active in");
    $('a[href="#'+ activeTab +'"]').tab('show')
    go = "#" + activeTab
    location.href = go
    return false;
});

###HTML

<ul class="nav nav-tabs">
  <li class="nav-item active"><a href="#event_show" class="nav-link active" data-toggle="tab">詳細</a></li>
  <li class="nav-item"><a href="#event_houkoku" class="nav-link" data-toggle="tab">経過報告</a></li>
</ul>

多分、シンプルなことだと思うのですが、なぜかできず数時間詰まっております。。
本当に恐縮なのですが、どなたかお知恵を貸してくださいますと幸いです。

Comments

[Lhankor_Mhy]

tab() というメソッドの定義をご提示ください。

[Lhankor_Mhy]

あ、Bootstrap の4系のメソッドですね。わかりました。

[akikko]

コメントありがとうございます！
はい、おっしゃる通りです。タブを開かせるところまではできたのですが、
リンククリックを限定できないことで、https://aaa.com/event1をクリックしても発火してしまいまして????正しく動かす方法が見えずに丸２日ほどが経過しております。。
何等かアドバイスを頂けると嬉しいです。

[Lhankor_Mhy]

https://aaa.com/event1をクリックしても発火するのは、何かマズいことがあるのですか？

[akikko]

ご返事ありがとうございます！
タブにactiveがない状態になってしまって、タブのデザインが消えてしまっているんです。
細かいことなのですが・・・。

[Lhankor_Mhy]

それ以外には困ることはないのですね？
つまり、メール以外で https://aaa.com/event1#houkoku に飛び、それでタブが開いても問題はない、ということでいいですか？

[akikko]

ありがとうございます！はい。おっしゃる通りです！

[Lhankor_Mhy]

問題を把握しました。

[akikko]

ありがとうございます！

Answer 1

ハッシュによる移動はその要素が表示されていないとできないので、タブコンテンツが表示されるまで待つ必要があると思います。

        $(function () {
            if (location.hash) {
                var url = window.location.href;
                var activeTab = url.substring(url.indexOf("#") + 1);
                $('a').removeClass("active in");
                $('a[href="#' + activeTab + '"]').tab('show')
                go = "#" + activeTab
                setTimeout(() => {
                    location.href = go;
                }, 0);
            }
        });

Comments

[akikko]

大変お忙しい中ご丁寧にありがとうございます！！
別件で外出してしまいましたので、戻り次第確認させていただきます。
本当にありがとうございます！

[akikko]

Lhankor_Mhy様
ご返事大変遅くなってしまい誠に申し訳ございません。
大変お忙しい中ご対応下さり、ありがとうございました！
こちらにて、無事問題なくタブ表示がされました！本当にありがとうございます。
location.hashというタグも全く存じておらず大変勉強になりました。
心より御礼申し上げます。

[Lhankor_Mhy]

お役に立てたようで何よりです。