SimpleTabsを使い、タブごとにアンカーを

質問

SimpleTabsを使って、切り替えられるタブごとにページ内リンクを貼りたいのですが、
可能でしょうか？
可能でしたら、恐縮ですが、カスタマイズ方法をお教えください。

SimpleTabs公式サイト：http://komra.de/labs/simpletabs/
※「DOWNLOAD SIMPLETABS v1.3 HERE.」から、php,css,javascriptが入ったzipをDLできます。

言葉だけでは伝わりにくいかと思いましたので、図解の画像を添付いたします。

■■■タブのHTMLはこうなっています■■■
<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 class="simpleTabsContent">Tab 1の内容</div>
　　　<div class="simpleTabsContent">Tab 2の内容</div>
　　　<div class="simpleTabsContent">Other tabの内容</div>
</div>

■■■ｊavascriptは文字数制限があり載せることができなかったので、お手数ですが上記の公式サイトからzipをDLしていただきたく思います。■■■

javascriptは勉強をしようしようと思いながらも後回しにしていたら、
使用しないといけない状態になってしまい、この有様で本当に申し訳ないです・・・。

どうぞ宜しくお願い致します。

回答No.1

my-- · ベストアンサー

<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>