My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

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

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タグのリンク箇所クリック時、
目的のタブが選択され、該当箇所にフォーカス移動が実現します。

Demo

※上記Demoで使用したBootstrapテンプレートは、以下となります。
Nitro Free Website Template Using Bootstrap 3 - FreeHTML5.co



以上、別のタブ内アンカーリンク先への移動実現方法でした。
ご参考まで。



【参考記事】

リンクのクリック時にJavaScriptを実行する - リンクのonClickの実装 - JavaScript プログラミング

lab.syncer.jp