• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:SimpleTabsを使い、タブごとにアンカーを)

SimpleTabsを使ってタブごとにアンカーを貼る方法

このQ&Aのポイント
  • SimpleTabsを使用して、タブを切り替えるごとにページ内リンクを貼る方法をご紹介します。
  • SimpleTabsは、タブのHTMLにulタグとliタグを使用し、JavaScriptを使ってコンテンツを表示する仕組みです。
  • 詳しい実装方法については、SimpleTabsの公式サイトから入手できるzipファイル内のドキュメントを参照してください。

質問者が選んだベストアンサー

  • ベストアンサー
  • my--
  • ベストアンサー率89% (91/102)
回答No.1

<script type="text/javascript"> function hoge(n) {  var uls = document.getElementsByTagName('ul');  for (var i = 0, l = uls.length; i < l; i++) {   if (uls[i].className === 'simpleTabsNavigation') {    var elems = uls[i].getElementsByTagName('a');    if (elems[n]) {     kmrSimpleTabs.setCurrent(elems[n], 'simpleTabsCookie'); // タブ切り替え     break;    } else return false;   }  }  return false; } </script> <div>  <a href="#p1" onclick="return hoge(0);">Tab 1</a>  <a href="#p2" onclick="return hoge(1);">Tab 2</a>  <a href="#p3" onclick="return hoge(2);">Other tab</a> </div> <div class="simpleTabs">  <ul class="simpleTabsNavigation">   <li><a href="#">Tab 1</a></li>   <li><a href="#">Tab 2</a></li>   <li><a href="#">Other tab</a></li>  </ul>  <div id="#p1" class="simpleTabsContent">Tab 1の内容</div>  <div id="#p2" class="simpleTabsContent">Tab 2の内容</div>  <div id="#p3" class="simpleTabsContent">Other tabの内容</div> </div> 上記コードは複数のタブコンテナに対応してませんが、ul要素にidを付与できれば もっと簡単に書けますし、複数の対応もそれほど難しくないと思います。そのあたりは工夫して下さい。 要はタブ切り替えのトリガとなってるa要素を探し、kmrSimpleTabs.setCurrentの 第一引数に渡して呼出してやればよいです。

motoG
質問者

お礼

my--さん、丁寧な回答ありがとうございます。 しかも、こんなに早く…! おかげでずっと悩んでいた問題が、本日中に解決することができました! 特にjavascript追加部分は本当に、自力では組むことはできなかったです。 また、最後の方のmy--さんのコメントについて、、、要勉強です!!すいません!! 本当に本当に助かりました。どうもありがとうございました! ■正しい使い方か分からないけど動作確認ok、自分及び私のような迷い人へメモ■ リンク<a>からタブ切り替えまでが遠い時のページ内移動 <a href="#p1" onclick="return inpagelink(0),location.href='#○○○';">Tab 1</a>

関連するQ&A