Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。
タブ・メニュー作ってみました。使いまわしを考慮してパッケージ化に挑戦。JavaScriptを切っているときは、ページ内リンクとなります。
HTML
<ul id="tab"><li class="present"><a href="#page1">Page_1</a></li><li><a href="#page2">Page_2</a></li><li><a href="#page3">Page_3</a></li><li><a href="#page4">Page_4</a></li><li><a href="#page5">Page_5</a></li></ul><div id="page1">11111 11111 11111</div><div id="page2">22222 22222 22222</div><div id="page3">33333 33333 33333</div><div id="page4">44444 44444 44444</div><div id="page5">55555 55555 55555</div>
切替のトリガーとなるメニュー部分と、各ページを仕切る<div>。ま～必ずしもこのカタチでなくとも良いんだけど、とりあえずコレを基本に作ってます。
起動部分
<script type="text/javascript">// <![CDATA[tab.setup = {tabs: document.getElementById('tab').getElementsByTagName('li'),pages: [document.getElementById('page1'),document.getElementById('page2'),document.getElementById('page3'),document.getElementById('page4'),document.getElementById('page5')]} //オブジェクトをセットtab.init(); //起動！// ]]></script>
実装の際は、タブ部分とページ部分のオブジェクトを配列として渡してから起動する形になります。要するに配列を渡せれば良いので、書き方や渡しかたは自由。置き場所は</body>直前を勧めとくよ。
Script
var tab = {init: function(){var tabs = this.setup.tabs;var pages = this.setup.pages;for(i=0; i<pages.length; i++) {if(i !== 0) pages[i].style.display = 'none';tabs[i].onclick = function(){ tab.showpage(this); return false; };}},showpage: function(obj){var tabs = this.setup.tabs;var pages = this.setup.pages;var num;for(num=0; num<tabs.length; num++) {if(tabs[num] === obj) break;}for(var i=0; i<pages.length; i++) {if(i == num) {pages[num].style.display = 'block';tabs[num].className = 'present';}else{pages[i].style.display = 'none';tabs[i].className = null;}}}}
コア部分。「tab」オブジェクトのメソッドとしてパッケージ化してあります。tab.init()でセットアップ。２ページ目以降を非表示にし、メニュー部分にイベントを割り当ててます。tab.showpage()が切替処理。クリックしたメニュー部分に「class="present"」を割り当て、対応するページだけ表示する。
memo: このScript部分は、先の起動部分より先に宣言されていなければならない。書き方工夫すればどうにかできるけど、現状ではそうなってる。
関連記事
- Archiva, サンプル
- Archiva, JSタブ切替え応用編 —他ページから直接タブにアクセスする—
WWW WATCHさんに紹介していただきました！ ありがとうございます。
Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。
35 Comments
以下の記事をどうぞ。
> http://archiva.jp/web/javascript/tab-menu2.html 2007–11–09 16:04
開いているタブをもう一度クリックすると、指定したＵＲＬにジャンプする事は可能でしょうか？ 2008–04–24 11:39
できます。でもリンクをダブルクリックしちゃうユーザも多いので避けたほうが無難ではないでしょうか。
参照先として別途リンクを用意したほうが親切かと思います。 2008–04–26 17:59
コメントを返して頂いていたのに・・・。
確かにダブルクリックして別ページに飛んでしまうと、ユーザの方に対しては親切ではないですね。
ホームページでは、別途リンク先を設定して利用させて頂きます。
今後の参考として、お時間があれば指定したＵＲＬにジャンプする方法のヒントでも教えていただけないでしょうか？
よろしくお願いいたします。 2008–05–10 11:19
その際、URLをDOMの参照として保存していると、元のURLに戻すときに苦労するかもしれません。そんな感じかな。 2008–05–13 15:49
大変参考になりました。
ありがとうございました。 2008–05–15 09:31
ものすごく悩んでます。助けてください。
指定期間で初期表示のタブを切り替えたいと思ってます、
単純にリスト部分をjavascriptのdocument.writeで指定期間ごとに class="present"を書き換えたんですがリスト部分のみ変わるだけで内容は同じものが表示されてリストと揃いません。
例えば2008/6/5～2008/6/11までリスト１2008/6/12～2008/6/18までリスト２という風にはできないでしょうか？
よろしくお願いします。 2008–06–06 14:57
CSSを見てもらえれば判るように、「class="present"」はタブ部分の表示を変えているに過ぎません。
タブによって切り替わる表示部分は tab.init() にて「display:none」しています。
つまり初期表示を変更するには、「class="present"」だけでなく、表示部分の style.display も設定しておかなければなりません。
初期表示は全て tab.init() で行っているので、ここに変数とIF分岐を追加してやれば日付によって初期表示を変更する実装は可能です。
ちなみにJavaScriptでの日付処理に関しては、以前まとめたことがあるので、気が向けば参考にしてみてください。
> http://archiva.jp/web/javascript/date-object.html 2008–06–07 06:44
javascriptのド素人だったんですが一冊本を必死で読んで、ヒントと合わせるとできました！
勉強にもなり、大変たすかりました。
ありがとうございました！ 2008–06–09 15:30
こちらのタブなのですが、こういったことは出来ますでしょうか。
＜yahooで例えます＞
・yahooのトップページのタブで「スポーツ」をクリックして表示。
・その後、ショッピングへ移動
・再度、トップページに戻ると、クリックしていた「スポーツ」のタブがそのまま表示されている。
上記の説明、分かりづらいかもしれないのですが、
見ている人が「タブ1」を選んだら、サイト内のページに移動して、
再度そのページに戻ってきても、選んだ「タブ1」が表示されているようにしたいのです。
現状ですと、「タブ1」「タブ2」「タブ3」（最初に表示されるのは「タブ1」）とあった場合、
上記のパターンだと、「タブ2」を選んでも、戻ってくると「タブ1」に戻ってしまいます。
もし、やり方がございましたら、ご教授いただけると幸いです。
長々と失礼しました。 2008–08–20 00:46
そうですね。タブをクリックしたときに、展開情報をCookieに保存しておけばできると思いますよ。タブを表示するときにCookieに記述があれば、そこを参考に開いておくことはできるでしょう。
Cookieに関しては以下の記事が参考になるかな。頑張ってください＾＾ｂ
http://archiva.jp/web/javascript/cookie-memo.html
http://archiva.jp/web/javascript/save_preset.html 2008–08–22 03:27
コードをみた所 css の display:none; display:block; を切り替えて、
ページの中身を消したり出したりしてタブを実現しているのかなと思ったのですが、
ページにアクセスした状態で消えている、2ページ目以後の内容
<div id="page2">22222 22222 22222</div> は
yahoo や google などの検索エンジンが拾ってくれるのでしょうか？
使ってみたいと思う場面があるのですが SEO が気になっています。 2009–02–12 04:26
displayプロパティの切り替えで実装しています。
SEO効果に関しては僕がここで答えるより「display:none SEO」でググったほうが後の世のため～。 2009–02–13 05:05
本当に、シンプルさがとても美しいです。
ありがとうございました！ 2009–02–16 12:26
ただいま勉強中なのですが・・ひとつ教えてください。
１１１ ２２２などが入っているボックスのサイズ・色・線は
どこでどのように設定すればよいでしょうか？
どうぞよろしくお願いします。 2009–02–24 12:29
素晴らしい記事、ありがとうございます！ 2009–04–17 09:06
こちらのサイトを参考にさせていただき、タブで切り替えてページを作成してます。
本当にシンプルで分かりやすく、感動してます！
真ん中にタブを置き、上下のイメージがタブを選択することによって、切り替わるようにもできますか？
上にページを持ってきただけでは、上のページだけが変わり、下のページはpage1～page５まで表示されてしまうのですが、
どうしたらよいのでしょうか？
教えていただけますでしょうか？ 2009–08–01 17:11
やりたいことがイマイチ想像できないのですが、
タブの位置やデザイン等はCSSの範疇です。よろしくやってください。
タブ展開とイメージ切り替えの連動ということなら、
tab.showpage() にてIF分岐とかしてやればできる筈～ 2009–08–03 14:09
素晴らしいタブメニューです。
一つご質問ですが、
タブメニューを2つにしたところ、IE6だとスクリプトエラーが出てしまいます。
何が原因か分かりますでしょうか？ 2009–10–23 01:59
すっきりときれいなタブですね。
このBBSもPREVIEW機能が見やすくて使いやすい♪
ぜひ使わせてもらいたいのですが、質問がひとつあります。
各々のタブの中の内容が大きくなると、タブの一ページ目に表示される内容の表示速度は遅くなってしまうのでしょうか？
HTMLファイルのサイズが200kb以上になるページにタブを付けて内容を分散させて表示させようと考えています。
ユーザーがタブの1ページ目の内容を見ている間に2ページ目以降を読み込ませる感じにしたいのですが・・・
どうでしょうか？ 2009–11–05 12:26
いろいろやり方はあるでしょうから、答えようがありません。
とりあえず僕の環境ではきっちり動きましたよー
> たくたくさん
ページ内容そのものは１回で全て読み込みます。
表示速度というよりページ読み込み速度が遅くなるでしょう。
スクリプトによる切り替え速度そのものは、あんまり変わらないと思いますね。
例に挙げられている段階的読み込みには、AJAX処理を挟むことになるのでしょうが、
つまり２ページ目以降の内容をそのHTMLに書かないということになりますから、
もちろん、そうしたほうが最初の表示分は速いです。 2009–11–09 06:25
このページ切替を私のホームページトップで使わせていただいております。
とても使い勝手もよく･･･切替がスムーズで少しFLASH等のパーツと組み合わせると
レベルの高いWEBページのように見え、格好が良く気に入ってます。
ありがとうございます。
今日は、もう1つ質問があってコメントさせていただきました。
同じページ内で、もう1つページ切替を作成しようとした場合にどのようなやり方がございますか？
何度か色々と試してみたのですが･･･JAVASCRIPT自体のエラーがおこって正常に表示していた
1つ目のページ切替さえできなくなります。
もし宜しければ教えていただきたいと思います。 2009–12–16 12:46
> http://archiva.jp/web/javascript/tab-menu2.html
上記ページのコメントで触れているように、
getElementsByTagName('li')が返すのは配列ではないので、たとえば
tabs: [
document.getElementById('tab').getElementsByTagName('li'),
document.getElementById('tab').getElementsByTagName('li'),
],
...のようにしても動作しません。
ヒントは getElementsByTagName('li')[2] です。
僕から言えるのは、ここまで。 2009–12–22 02:53
ヒントでしたね･･･汗･･･頑張ってやってみます！！
成功したら万歳です！！
追加でもう1つ教えてください！！
現在は･･･5つのタブですが･･･減らす場合は？
分かっている方には･･･単純で幼稚な質問かもしれません･･･
技術がそこまで行ってませんので。。。申し訳ございませんが・・・
またヒントをよろしくお願いします。
又、JAVASCRIPTを勉強するのに貴殿のページ以外に･･･初心者におススメがあれば？
有りましたら教えて下さいまし！！よろしくお願いします！！ 2009–12–22 13:28
の補足です。
今まで色々自分で試してみました。
＜BODY＞前に記述する部分をページ数に併せて少なくして、
TABで記述する<li>部分を少なくしたり
<ul id="tab">
<li class="present"><a href="#page1">Page_1</a></li>
その他･･･必要な部分だけ表記して、他のタブは 空白にしたり
とやりましたが･･･なぜかエラー（各タブが隠れず表示されたまま）表示になります。
そのため質問させて頂きました。よろしくお願いします。 2009–12–22 13:33
特定のタブの特定の部分（アンカー）へリンクさせることって可能でしょうか？ 2010–01–07 14:43
タブ切り替え、利用させていただいており大変重宝しております。
ありがとうございました。
質問があります。
「page1」タブ内に画像をポップアップ表示させるjQueryを利用しています。（以下URLのjQuery）
http://www.css-lecture.com/template/2008/0925/
「page1」ではjQueryが適用され、ポップアップ表示されるのですが、
「page1」以外の「page2」に画像ギャラリーをポップアップ表示させようとしてもjQueryが適用されないようです。
どうやら、最初に読み込んだJavaScriptが「page1」以外のタブ内では適用されないようですが、
「page1」以外のタブにもJavaScriptを適用させる方法がおわかりでしたらご教授いただければと思います。
よろしくお願い致します。 2010–12–10 01:10
ゲーム攻略サイトなどで他のページに飛ぶとき、別のURLが必要になるのでしょうか？ 2011–02–15 16:16
「ＷＥＢ タブメニューを作る」の検索で、たどり着きました。
恥ずかしながら、ソースを丸ごとコピーして使いました。
無断使用はいけないと思うので、ご報告いたしました。
また、よろしければ「リンクなど」で御紹介したいと思うのですが、構わないでしょうか？
よろしくお願いします。
失礼します。 2011–03–28 11:42
よろしく使い倒してやってください。 2011–03–30 10:30
リンクのページにて、本ページとトップページ、それと説明などを入れておきました。
快諾して頂き、誠にありがとうございます。
リンクを張る時にaboutを見たのですが・・・
リンクフリーとあり (;-- けどまぁ
出身地は比較的近い所だったんですね。
私も、以前、首都圏にいたことがあります。
こちらのほうからだと、東京と東京都と首都圏の違いすら、わからなかったり・・・
時期が時期なので、この話題はこのあたりで。
元来プログラマだったのですが、今は仕事で、ちと離れています。
昔話はできても、なかなか仕事で使わない言語には手を出せず・・・
こんな感じですが、今後ともよろしくお願いします。
失礼します。 2011–03–31 11:49
しかしサーバー引っ越しで消えてしまったという記事を読みホッとしました。
このページの手法を使わせてもらい、その謝辞としてリンクさせてもらっています。
リンクが不適切だったら、お知らせくだされば除きます。
http://homepage2.nifty.com/nakkara/iNetRadioReadme.html 2011–12–22 00:17
よろしくご利用くださいｗ 2012–01–11 22:24