他ページから直接タブにアクセスするには、以下をどうすればなりますか？

質問

他ページから直接タブにアクセスするには、以下をどうすればなりますか？
タブのidには、tbc_1～5までを設定しています。

function $(id) {return document.getElementById(id);}
function tab(n) {
var li=$("tab").getElementsByTagName("li");
for(var i=1;i<=li.length;i++){
$("tb_"+i).className="";
$("tbc_"+i).style.display="none";
}
$("tb_"+n).className="on";
$("tbc_"+n).style.display="block";
}

回答No.5

fujillin

No4様がすでに回答なさっているのと、参考に挙げておられるサイトにも出ているので、No4の補足部分についてのコメントのみですが…

・連続して記述するのならscriptタグを分ける必要はなく一つですみます。
・最初のfunction tab()と後のvar tabってバッティングしていない？（未確認）
・var tabの中に同じfunction tab()が定義されているけれど、無駄では？
・var tabはリスト形式の記述のはずだけれど、終わりの方で文法が違ってないか？
・終わりに呼ばれているthis.dive()ってどこにもないけど？

全体の構成について
・リンクでもタブが呼べるようにするのなら、ロード時にスクリプトでセットすることになるのでしょうから、表示/非表示をスタイルシートで初期設定せずに、初期設定は全部表示にしておいて、スクリプトで非表示にした方がよさそう（→javascriptオフのユーザを考慮）
・同様に、タブ側のリンクの形式もスクリプトにせずに参考サイトのようにページ内リンクにしておいた方が、スクリプトオフの時に通常のページ内リンクとして機能するのでよさそう。
・各li要素にイベントをセットしなくても、上位のul要素（又はdocument）にひとつだけイベントをセットすれば同様のことが可能だし、項目の増減や順序の入れ替えに対しても管理が簡単。

回答No.4

think49

#1 の補足より。

> http://archiva.jp/web/javascript/tab-menu2.html
> 今のに上記URLに記載されているものを組み合わせれば可能っぽいですね。

そこまで理解しているのであれば、それほど難しくはないのでは…。

---
var target = document.getElementById(location.hash.slice(1));
if (target) target.style.display = 'block';
---

補足

think49さんご回答ありがとうございます。

現在のタブを class="on" にて表示させているのですがうまくいきません。

【タブ部分のHTML】
<ul class="ul01 clearFix" id="tab">
<li id="tb_1" class="on"><a href="javascript:tab(1)">タブ1</a></li>
<li id="tb_2"><a href="javascript:tab(2)">タブ2</a></li>
<li id="tb_3"><a href="javascript:tab(3)">タブ3</a></li>
<li id="tb_4"><a href="javascript:tab(4)">タブ4</a></li>
<li id="tb_5"><a href="javascript:tab(5)">タブ5</a></li>
</ul>

<div class="box" id="tbc_1" style="display: block">ボックス1</div>
<div class="box" id="tbc_2">ボックス2</div>
<div class="box" id="tbc_3">ボックス3</div>
<div class="box" id="tbc_4">ボックス4</div>
<div class="box" id="tbc_5">ボックス5</div>

【他ページからタブへのリンク指定】
<a href="/tab/index.html#tbc_1">タブ1</a>
<a href="/tab/index.html#tbc_2">タブ2</a>
<a href="/tab/index.html#tbc_3">タブ3</a>
<a href="/tab/index.html#tbc_4">タブ4</a>
<a href="/tab/index.html#tbc_5">タブ5</a>

【javascript】
<script type="text/javascript">
function $(id) {return document.getElementById(id);}
function tab(n) {
var li=$("tab").getElementsByTagName("li");
for(var i=1;i<=li.length;i++){
$("tb_"+i).className="";
$("tbc_"+i).style.display="none";
}
$("tb_"+n).className="on";
$("tbc_"+n).style.display="block";
}
</script>

<script type="text/javascript">
var tab = {
init: function(){
var target = document.getElementById(location.hash.slice(1));
function tab(n) {
var li=$("tab").getElementsByTagName("li");
for(var i=1;i<=li.length;i++){
$("tb_"+i).className="";
$("tbc_"+i).style.display="none";
}
$("tb_"+n).className="on";
$("tbc_"+n).style.display="block";
} if (target) target.style.display = 'block';
}
this.dive();
}
</script>

回答No.3

yyr446

修正します。jQueryの$.contents()の中身を見て気づきました。

こおしときます。

function $(id) {
var iframe=document.getElementsByTagName("iframe")[0];
var content;
try{
content=iframe.contentDocument;
return content.getElementById(id);
}catch(e){
content=iframe.contentWindow.document
return content.getElementById(id);
}
}

もっと簡単に書けばよいか！

これ↓
function $(id) {
var iframe=document.getElementsByTagName("iframe")[0];
var content=iframe.contentDocument||iframe.contentWindow.document;
return content.getElementById(id);
}

お礼

yyr446さん何回もご回答いただきありがとうございます。

実装はiframeを利用していないんです。

回答No.2

yyr446

documentが余分でした。

IEの方がすっきりとiframe取得できんけど、

<iframe name="hoge" src="/gomi.htm"></iframe>

function $(id) {
var iframe=document.getElementsByTagName("iframe")[0];
var content;
try{
content=iframe.contentDocument;
return content.getElementById(id);
}catch(e){
content=hoge.window.document;
return content.getElementById(id);
}
}

こうですね。

回答No.1

yyr446

普通に、他ページから直接タブにアクセスする事は出来ません。

同じサイト（ドメイン）の他ページをページ内の<iframe>に
表示しているなら、出来ます。

function $(id) {return document.getElementById(id);}

を
function $(id) {
iframe=document.getElementsByTagName("iframe")[0];
var content;
try{
content=iframe.window.document;
}catch(e){
content=iframe.contentDocument;
}
return content.document.getElementById(id);
}

にすれば、出来るかいな..

あるいは、AJAXの仕組みを作りたいという質問ですかね？

補足

質問後調べたところ、以下のURLにできることが書いてありました。
http://archiva.jp/web/javascript/tab-menu2.html

今のに上記URLに記載されているものを組み合わせれば可能っぽいですね。