同一ページの別タブからアンカーリンクを指定する方法

はじめに

ウェブ開発をしていると、同一ページ内の別タブにアンカーリンクで飛ばしたいシーンが出てくることがあります。例えば、ユーザーが特定のリンクをクリックすると、自動的に特定のタブが表示されるようにしたい場合です。今回はJavaScriptを使って、そのような機能を実装する方法をご紹介します。

JavaScriptでタブを切り替える方法

以下のコードは、JavaScriptを使って特定のタブを自動的に表示させる方法を示しています。

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

コードの解説

1. <script language="javascript" type="text/javascript">:
   • JavaScriptコードを含むスクリプトタグを定義します。現在では、language属性は省略可能です。
2. function OnLinkClick():
   • OnLinkClickという関数を定義します。この関数がリンククリック時に呼び出されます。
3. var elements = document.getElementsByName("tab-item");:
   • ページ内のname属性が"tab-item"の全ての要素を取得します。
4. elements[1].checked = true;:
   • 取得した要素の2番目（インデックスは0から始まるため）の要素に対して、checked属性をtrueに設定します。これにより、該当するタブが表示されます。

使用例

まず、HTMLで各タブをラジオボタンとして実装します。それぞれのタブには、tab-itemというnameを指定しておきます。そして、アンカーリンクを設置します。リンクをクリックすると、次に定義するJavaScript関数が実行され、指定したタブに移動します。

<input type="radio" name="tab-item" id="tabA">
<label for="tabA">タブA</label>
<a href="javascript:OnLinkClickToTab2();">Go to タブB</a>

<input type="radio" name="tab-item" id="tabB">
<label for="tabB">タブB</label>
<a href="javascript:OnLinkClickToTab3();">Go to タブC</a>

<input type="radio" name="tab-item" id="tabC">
<label for="tabC">タブC</label>

次に、JavaScriptでアンカーリンクを指定する関数を作成します。以下のコードでは、リンクがクリックされたときに実行される関数を定義しています。

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

  function OnLinkClickToTab3() { 
    var elements = document.getElementsByName("tab-item"); 
    elements[2].checked = true; 
  } 
</script>

この関数では、document.getElementsByNameメソッドを使用して、nameがtab-itemである要素（つまり、各タブのラジオボタン）を取得します。その後、OnLinkClickToTab2()関数とOnLinkClickToTab3()関数がそれぞれ2番目のタブと3番目のタブにジャンプするように定義されています。

まとめ

これで、同一ページ内の別タブからのアンカーリンク指定が可能です。JavaScriptを使ってタブの切り替えをスムーズに実装しましょう。