タブ切り替えが出来るjavascriptを使用しています。

質問

タブ切り替えが出来るjavascriptを使用しています。

http://5am.jp/jquery/jquery_ui_tabs/
ここのサイトを参考にしてタブ切り替えが動くところまで行きましたが、
どうにかして、別ページからリンクをクリックした時に、特定のタブへ直接飛ぶようにしたいと思っています。

<script type="text/javascript">
　$(function() {
　　$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' } });
　});
</script>

ヘッダーにある上記のjavascriptを少し編集すればできそうな気がするのですが、
もうお手上げになっちゃいました。

申し訳ないのですが、どなたか教えていただければと思います。
よろしくお願いします。

回答No.1

my-- · ベストアンサー

var index = 0;
　var uri = location.href;
　var num = uri.lastIndexOf('#');
　if (num > -1) {
　　var idStr = uri.substring(num + 1);
　　var list = $('#container-1').children('div');
　　list.each(function(n) {
　　　if (this.id === idStr) {
　　　　index = n;
　　　　return false;
　　　}
　　});
　}

　$('#container-1 > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' }, selected: index });

オプションのselected（0から始まる数値）で初期表示タブを指定できます。

http://okwave.jp/qa/q5942078.html

やってることはここと同じです。

お礼

ありがとうございます！

しかし、思うようにjavascrptが動かなくてウーンと思ってましたが、
比較的得意としているphpと組み合わせて、なんとか動くようになりました！

一応以下にソースを書いておきます。

http://xxx.xxx?id=2
とかした場合。

<script type="text/javascript">
<?php
if( $_GET["id"] != ""){
print "var index = ".$_GET["id"].";";
}else{
print "var index = 0;";
}
?>　
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' },selected:index });
});
</script>