同一ページ別タブ内アンカーリンクへの移動実現方法

f:id:sntkk3:20171009123027p:plain

同一ページ内の異なるタブ内アンカーリンクに移動するには

通常、アンカーリンク(同一ページ内)への移動は、以下の方法(アンカーリンク先要素に付けたID名をhrefに設定するだけ)で可能です。

<li><a href="#ID名">リンクテキスト</a></li>

しかし、アンカーリンク先が他のタブ内だったりすると機能せず、目的の場所に移動できないという問題が。

これを解決し、何とか目的のアンカーリンク先に移動できないものか、
今日はその方法を確認してみました。

[前提]
ここで対象とするタブは、先日の以下記事内でご紹介したタブであることを前提とします。
times-diary.hatenablog.com

【解決方法】

JavaScriptで目的のタブ移動する処理を追加することで、この希望動作が実現できることを確認しました。

[手順]
1. JavaScriptで以下OnLinkClick関数を追記(bodyタグ終了直前)
2. a タグ内に上記OnLinkClick関数を呼び出すコードを追記

1. JavaScriptで以下OnLinkClick関数を追記(bodyタグ終了直前)
[コード例]

<script language="javascript" type="text/javascript"> 
  function OnLinkClick(a_name) { 
    var elements = document.getElementsByName( "tab-radios" ) ; 
　    elements[1].checked = true ; 
  } 
</script>

2. a タグ内に上記OnLinkClick関数を呼び出すコードを追記
[コード例]

<li><a href="#ID名" onClick="OnLinkClick();">リンクテキスト</a></li>

[解説]

今回のように、リンク元とリンク先が別のタブに存在する場合、
通常の方法では目的地のタブが選択された状態にならず、目的の場所にフォーカスが移りません。

タブを超えてアンカーリンク先への移動を可能にするためには、その前に目的のタブを選択した状態を作る必要があります。
そこで、この動作をJavaScriptを使って実現します。

タブの各要素(タブA～タブC)の識別について
今回ここではタブをラジオボタンで作っているため、
タブA～タブCを表すラジオボタンの要素には、
「tab-radios」
というクラスを指定しています。

上記JavaScriptコードでは、
「tab-radios」の結果がelements に代入されることになるので、elementsの各要素、
elements[0] ⇒　タブA
elements[1] ⇒　タブB
elements[2] ⇒　タブC
となります。

今回の場合、アンカーリンク先がタブB内にあるものとすると、
タブB = elements[1]
となり、
elements[1].checked = true ;
とすることで、タブBを選択した状態を実現します。

a タグに onClick="OnLinkClick(); を追記することで、
JavaScriptで別途記述した OnLinkClick関数の処理を呼び出します。
これにより、aタグのリンク箇所クリック時、
目的のタブが選択され、該当箇所にフォーカス移動が実現します。