- ベストアンサー
タブ切替
下記サンプルを使ってタブ切替のページを作成したのですが、 タブだけでなく、ページ内に「次へ」「戻る」ボタンを追加する方法を教えてください。 ■タブ切替ページ http://archiva.jp/web/javascript/tab-menu.html ■追加内容 page1 最下部に「次へ」のボタンでpage2へ page2 最下部に「戻る」のボタンでpage1、「次へ」のボタンでpage3へ よろしくお願いいたします。
- JavaScript
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>タブ切替のサンプル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <script type="text/javascript"> // <![CDATA[ var tab = { peek:0, init: function(start){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(var i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } this.peek = start; this.showpage(tabs[this.peek]); }, 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) { tab.peek = num; 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; } } } } function initialize(){ 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(0); } function proceed(num){ if(tab.peek + num < tab.setup.tabs.length && 0 <= tab.peek + num){ tab.showpage(tab.setup.tabs[tab.peek + num]); } /* どこに持たせるか悩むのでボタンの無効化はしません。 */ } // ]]> </script> <style type="text/css"> body { color: #333; font-family: "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", Verdana, sans-serif; font-size: 62.5%; /* 10px */ line-height: 1.5; text-align: center } h1 {font-size: 1.5em;} p, ul, div {font-size: 1.2em; list-style-type: none;} #container { width: 66.6%; margin: 0 auto; text-align: left; } #tab { margin-left: 0; padding-left: 0; margin-bottom: 1em; border-bottom: 2px solid #333; height: 1.5em; overflow: hidden; } #tab li { float: left; width: 64px; height: 1.5em; } #tab li a { display: block; width: 60px; height: 1.5em; border: 1px solid #ccc; border-bottom: 0; color: #777; text-align: center; } #tab li a:hover, #tab li.present a { border-color: #333; color: #000; } #page1, #page2, #page3, #page4, #page5 { margin-bottom: 12em; padding-top: 1em; } </style> </head> <body onload="initialize();"><div id="container"> <h1>タブ切替のサンプル</h1> <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 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 </div> <div id="page2">22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 22222 </div> <div id="page3">33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 33333 </div> <div id="page4">44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 </div> <div id="page5">55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 55555 </div> <ul> <li><a href="/web/javascript/tab-menu.html">»記事に戻る</a></li> <li><button onclick="proceed(-1);">前のタブ</button></li> <li><button onclick="proceed(1);">後のタブ</button></li> </ul> </div></body> </html>
お礼
ボタンを各ページ内へ入れることで、解決できました。 ありがとうございました。
補足
早速のご回答ありがとうございます。 上記コードを試して見ましたが、どうしても1ページ目に 「前のタブ」が残ってしまいます。 1ページ目には「後のタブ」だけの表示にすることは可能でしょうか？