お世話になります。
現在あるシステムの構築をしており、その中で、あるページの特定のタブへ直接リンクさせるのに苦労しております。
例えば、リンク元(ページA)にあるリンクをクリックすると、リンク先(ページB)のタブ(例えばここでは#tab4と呼ぶことにします)を表示する、という具合です。
現在採用しているやり方としては、以下のスクリプトをソースに挿入しています。
HTML部分 (ナビゲーションとそれに対応するタブコンテンツ部分のみ)
<nav> <ul class="nav nav-tabs"> <li class="nav-item"><a href="#tab1" class="nav-link navbar-default" data-toggle="tab">タブ1</a></li> <li class="nav-item"><a href="#tab2" class="nav-link navbar-default" data-toggle="tab">タブ2</a></li> <li class="nav-item"><a href="#tab3" class="nav-link navbar-default" data-toggle="tab">タブ3</a></li> <li class="nav-item"><a href="#tab4" class="nav-link navbar-default" data-toggle="tab">タブ4</a></li> </ul> </nav> <!--タブのコンテンツ部分--> <div class="tab-content px-5 bg-white"> <div id="tab1" class="tab-pane"> タブ1の表示 </div> <div id="tab2" class="tab-pane"> タブ2の表示 </div> <div id="tab3" class="tab-pane"> タブ3の表示 </div> <div id="tab4" class="tab-pane"> タブ4の表示 </div>
【追記】ちなみに、このHTMLにはBootstrap JSを利用しています。
https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
jQuery部分
<script> $(document).ready(function() { // #(ハッシュ)指定されたタブを表示する var hashTabName = document.location.hash; console.log(hashTabName); $('.nav-tabs a[href="+hashTabName+"]').tab('show'); }); </script>
ご存知かもしれませんが、上記のソースは、リンク先のページを指し示すURLには予めハッシュが付されており、リンク先のページではそれを取得したうえで変数hashTabNameに代入し、HTMLのクラス(nav-tabs)のa要素(a href)と適合するタブを表示する、というものです。
ところが、これを実行しても、ハッシュで指定したタブ画面を表示することができないでおります。試しに、hashTabNameに直接#tab4と入力して実行すると正常に機能します。
であれば、hashTabNameに値が入っていないのかもしれないと思い、console.logも加えて実行したところ、その変数の値には#tab4が代入されており、この点は問題なさそうです。
そうすると、コードのうち、
$('.nav-tabs a[href="+hashTabName+"]').tab('show');
の部分において、変数が評価されているのか等に絞り込んでいるのですが、その後一向に改善に進みません。
大変恐れ入りますが、どなたか、この点のさらなる原因究明にお知恵をお貸し頂きたく、ご教示いただければ幸いです。
回答2件
あなたの回答
tips
プレビュー