- ベストアンサー
SimpleTabsを使ってタブごとにアンカーを貼る方法
- SimpleTabsを使用して、タブを切り替えるごとにページ内リンクを貼る方法をご紹介します。
- SimpleTabsは、タブのHTMLにulタグとliタグを使用し、JavaScriptを使ってコンテンツを表示する仕組みです。
- 詳しい実装方法については、SimpleTabsの公式サイトから入手できるzipファイル内のドキュメントを参照してください。
- みんなの回答 (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の 第一引数に渡して呼出してやればよいです。
お礼
my--さん、丁寧な回答ありがとうございます。 しかも、こんなに早く…! おかげでずっと悩んでいた問題が、本日中に解決することができました! 特にjavascript追加部分は本当に、自力では組むことはできなかったです。 また、最後の方のmy--さんのコメントについて、、、要勉強です!!すいません!! 本当に本当に助かりました。どうもありがとうございました! ■正しい使い方か分からないけど動作確認ok、自分及び私のような迷い人へメモ■ リンク<a>からタブ切り替えまでが遠い時のページ内移動 <a href="#p1" onclick="return inpagelink(0),location.href='#○○○';">Tab 1</a>