タグを切り替えるJavaScriptについて

質問

下記のurlを参考にして、タグを切り替えるJavaScriptを使いレイアウトをしています。
http://archiva.jp/web/javascript/tab-menu.html

やりたいことは各内容をIDセレクタでくくりたいのです。
<div id="page1">
　<h2>page1</h2>
　<p>パンクズ</p>
　<div class="nav">
　　<ul id="tab">
　　　<li><a href="#page1"><span>page1を選択中</span></a></li>
　　　<li><a href="#page2"><span>page2</span></a></li>
　　　<li><a href="#page3"><span>pave3</span></a></li>
　　</ul>
　</div>
　<p>段落１</p>
</div>
<div id="page2">
　<h2>page2</h2>
　<p>パンクズ</p>
　<div class="nav">
　　<ul id="tab2">
　　　<li><a href="#page1"><span>page1</span></a></li>
　　　<li><a href="#page2"><span>page2を選択中</span></a></li>
　　　<li><a href="#page3"><span>pave3</span></a></li>
　　</ul>
　</div>
　<p>段落１</p>
</div>
...page3

このようにやりたいのですが、JavaScriptがIDセレクタの"tab"にしか対応していないため、他のページにいくとクリックが効かなくなってしまいます。
idセレクタをclassセレクタに設定し直してもidセレクタにしか対応していないため効きません。

tag2とtab3に対応させるためにはどのようにすればいいでしょうか。

よろしくお願いします。

回答No.1

fujillin · ベストアンサー

質問の意味が理解できていないのですけれど…

タブのセットを複数作りたいのではなくって、各タブのパネル内にタブの表示を入れたいってことでしょうか？
ちなみに、「タグ」（＝HTMLのマークアップ用の記号）ではなく、「タブ」です。

当てずっぽの推理だと、<div id="page○">というのが各パネルになっていて、その中にナビゲーション用のタブがそれぞれあるってことでしょうか？
同じものを各パネルに入れて表示することの意味がわかりません。
どうせ表示しておくものなので、ご提示のサイトの例のようにひとつのものを利用するのが合理的ではないのでしょうか？

質問文を見ると「選択中」という表示を付け加えたいのかとも思われますが、ご提示のサイトのものでも選択中のものは表示が変わるようになっていますし、選択中のタブにはクラス設定がされるようになっているので、もっとはっきりさせたければタブの色を変えるとか、あるいはご質問文のように文字を付け加えるとかも可能かと思われます。

ご質問にの件に戻れば、もし、（↑）の想定があっているなら、ご提示のものも処理的にはほとんど同じです。
ただし、ご提示の構文からはパネルどれなのか不明なので（記述した人は識別できているでしょうが）、スクリプトの処理少し面倒かも…

またまた、当てずっぽうで、idがpageで始まるdivが各パネルだと仮定すれば、こんなのでいけるかも。
（＊全角空白は半角にして、</body>の直前に入れる）

<script type="text/javascript">
<!--

(function(){
　var div = document.getElementsByTagName("div");
　var i = 0, d, panel = [];
　while(d=div[i++]) if(/^page\d+$/.test(d.id)) panel.push(d);

　var show = function(id){
　　var i, p, n;
　　for(i=0; p=panel[i++];) if(p.id == id){ n = i; break; }
　　if(n) for(i=0; p=panel[i++];) p.style.display = i==n?"":"none";
　}

　if(panel.length) show(panel[0].id);

/*@cc_on@*/
　document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){
　　var t = evt./*@if(1)srcElement@else@*/target/*@end@*/;
　　var p = t.parentNode;
　　if(t.nodeName == "SPAN" && p.nodeName == "A")
　　　　show(p.href.match(/#(page\d+)$/)[1]);
　}, false);

})();

//-->
</script>

お礼

回答ありがとうございます。
fujillinさんの言う通り説明不足でした。
すみません。

fujillinさんの推理通り、各パネルの中にナビゲーション用のタブを入れたかったのです。
理由は２つあって、１つ目はパンクズです。
レイアウトを
↓パンクズ
↓タブ
↓パネル
の順番に表示したかったのです。
各パネルは同ページ内なのでタブを切り替えてもパンクズが変わらないため困っていました。
これをやるにはパンクズ、タブ、パネルを全てパネルでくくればうまくいくと思ったのです。

２つ目の理由は、画像です。
上の質問の時は
<span>page1を選択中</span>
<span>page2</span>
<span>page3</span>
と表記したのですが、本当はタブをテキストではなく、それぞれの画像で表示したかったのです。それで上記のような書き方をしてしまいました。
画像は計６枚あります。
page1の画像　と　page1の選択中の画像
page2の画像　と　page2の選択中の画像
page3の画像　と　page3の選択中の画像

cssで画像を切り替えようと考えたのですが、同ページ内なので画像置換もうまくできませんでした。
１つ目のパネルでくくるやり方でやれば_off_onで画像を切り替えるJavaScriptを使って切り替えることができると思いました。

私が説明を省略してしまったことで手間を取らせてしまって申し訳ありませんでした。

回答していただき、JavaScriptを記述までしていただいて本当にありがとうございました。
早速試してみます。

最後に、「タブ」でしたね。
恥ずかしいです。

補足

パネルを３つにわけることでdisplay:noneが効かなかったのですが、解消されました。
ありがとうございます。
しかし、他のタブをクリックしてもパネルが切り替わりませんでした。

画像はcssの方でうまくいきました。

レイアウトを
↓パンクズ
↓タブ
↓パネル
という風にしたかったのですが、
↓タブ
↓パンクズ
↓パネル
という風に変更しようかと思います。

回答していただいてありがとうございました。