- 締切済み
javaスクリプトを使ったタブ切り替えに関して質問です。
javaスクリプトを使ったタブ切り替えに関して質問です。 http://blog.livedoor.jp/soken2ch/contents/itmobile/ このページの下部にもう一つタブエリアを作りたいのですが、一つのページにタブエリアを複数作るのにはどう記述すればいいのでしょうか？ よろしくお願いいたします。
- mirainokai
- お礼率25% (19/76)
- JavaScript
- 回答数3
- ありがとう数9
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
こんばんは。 ご提示のサイトをこちらのIE6で見ると、添付画像の状態になって、タブが表示されないみたい… ソースの構造をつかむのが面倒だったので、No1様が簡略化してくださったのを見て、それを利用させていただいています。 ・CSSを使うのなら、レイアウトや装飾はできるだけCSSにもっていったほうが HTMLが見やすくなる。 ・tabの設定時にtab.init()を行なっているのだから、設定にgetElementを 列挙させなくても良いだろう ・・・なんて思っていろいろいじっていたら、別物になってしまいました。 CSSを解析するのも面倒だったので、見た目で真似しています。なので多少違うかも。 とりあえず、CSSは全部兼用にしてありますが、それぞれで体裁を変える場合はセレクタをid指定にすれば、個々のタブ群ごとの設定も可能です。 タブと表示内容の全体をdiv要素でくくって、それにidをつけておいて、 一番最後のほうの var tab1 = new Tab('tab1'); var tab2 = new Tab('tab2'); がタブを設定しているところ。（何個あっても可） 原型に近いものはNo2様がすでにご提示なさっていますので、まあいいかと、ご参考までに。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <style type="text/css"> .tab_wrapper { background-color:#fff; } ul.tab { list-style-type: none; height:1em; margin:0; padding:0; border-bottom: 2px solid #333; overflow:hidden; } ul.tab li { float:left; } ul.tab li a { display: block; border: 1px solid #ccc; border-bottom: 0; padding: 0 20px; color: #777; text-align: center; font-size: 12px; color: #0000cd; } div.tab_panel { position:relative; width:100%; height:200px; clear:both; } div.tab_panel iframe { width:100%; height:200px; border:0; position:absolute; overflow:auto; } ul.tab li a:hover, ul.tab li.active a { border-color: #333; color: #fff; background: #111; } </style> </head> <body> <p>タブその1 <div id="tab1" class="tab_wrapper"> <ul class="tab"> <li><a href="#p1">title1</a></li> <li><a href="#p2">title2</a></li> <li><a href="#p3">title3</a></li> </ul> <div class="tab_panel"> <iframe id="p1" src="Test/A.html" frameborder="0"></iframe> <iframe id="p2" src="Test/B.html" frameborder="0"></iframe> <iframe id="p3" src="Test/C.html" frameborder="0"></iframe> </div> </div> <hr> <p>タブその2 <div id="tab2" class="tab_wrapper"> <ul class="tab"> <li><a href="#p4">title4</a></li> <li><a href="#p5">title5</a></li> <li><a href="#p6">title6</a></li> </ul> <div class="tab_panel"> <iframe id="p4" src="Test/D.html" frameborder="0"></iframe> <iframe id="p5" src="Test/E.html" frameborder="0"></iframe> <iframe id="p6" src="Test/F.html" frameborder="0"></iframe> </div> </div> <script type="text/javascript"> // <![CDATA[ var Tab = function(tab_id) { this.id = tab_id, this.tab = [], this.panel = []; this.init(); } Tab.prototype = { dive : function() { if (this.getPanel(window.location.hash.split('#')[1])) return; if (this.tab[0]) this.getPanel(this.tab[0].id); }, getPanel : function(id) { var flg; if (flg = this.id2obj(id, 'panel')) this.showPanel(id); return flg; }, showPanel : function(id) { var i = 0, e, p = this.panel, t = this.tab; while (e = p[i++]) { e.style.display = (id == e.id)?'block':'none'; this.id2obj(e.id, 'tab').className = (id == e.id)?'active':''; } }, clickfunc : function(obj) { return function(evt) { var t = evt.target || evt.srcElement; if ('A' == t.nodeName) obj.getPanel(t.href.split('#')[1]); } }, id2obj : function(id, f) { var i, e, t; if ('panel' == f) { t = this.panel; for (i=0; i<t.length; i++) if (id === t[i].id) { e = t[i]; break; } } else if ('tab' == f) { t = this.tab; for (i=0; i<t.length; i++) if (id === t[i].id) { e = t[i].elm; break; } } return e; }, init : function() { var i, c, e, t = document.getElementById(this.id); e = check('DIV', 'tab_panel', 'IFRAME'), this.panel = e.child; e = check('UL', 'tab', 'LI'); for (i=0; i<e.child.length; i++) { this.tab[i] = { elm : e.child[i], id : '' }; c = e.child[i].firstChild; while (c && c.nodeName != 'A') c = c.nextSibling; this.tab[i].id = c?c.href.split('#')[1]:null; } if (this.tab && this.panel) { try{ e.parent.addEventListener("click",this.clickfunc(this),false); }catch(evt){ e.parent.attachEvent("onclick",this.clickfunc(this)); } this.dive(); } function check(t1, cls, t2) { var i, p = null, r = [], e = t.getElementsByTagName(t1); for (i=0; i<e.length; i++) if (cls == e[i].className) { p = e[i]; break; } if (p) r = p.getElementsByTagName(t2); return { parent:p, child:r }; } } } var tab1 = new Tab('tab1'); var tab2 = new Tab('tab2'); // ]]> </script> </body> </html>
関連するQ&A
- タブ切替
下記サンプルを使ってタブ切替のページを作成したのですが、 タブだけでなく、ページ内に「次へ」「戻る」ボタンを追加する方法を教えてください。 ■タブ切替ページ http://archiva.jp/web/javascript/tab-menu.html ■追加内容 page1 最下部に「次へ」のボタンでpage2へ page2 最下部に「戻る」のボタンでpage1、「次へ」のボタンでpage3へ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- タブ切り替え 複数同時を複数組 javascript
タブ切り替え 複数同時を複数組 javascript タブ切り替えのページを作りたいのですが ググっても複数同時に切り替えるものや複数組のものはあっても 複数同時を複数組切り替えるものはありません。 したいことは ｜タブ１｜タブ２｜タブ３｜ ｜コンテンツ1-1｜コンテンツ1-2｜コンテンツ1-3｜ ｜タブ４｜タブ５｜タブ６｜ ｜コンテンツ4-1｜コンテンツ4-2｜コンテンツ4-3｜ ｜タブ７｜タブ８｜タブ９｜ ｜コンテンツ7-1｜コンテンツ7-2｜コンテンツ7-3｜ ・ ・ ・ これが ｜タブ１｜タブ２｜タブ３｜←タブ２を押した場合 ｜コンテンツ2-1｜コンテンツ2-2｜コンテンツ2-3｜ ｜タブ４｜タブ５｜タブ６｜←タブ５を押した場合 ｜コンテンツ5-1｜コンテンツ5-2｜コンテンツ5-3｜ ｜タブ７｜タブ８｜タブ９｜ ｜コンテンツ7-1｜コンテンツ7-2｜コンテンツ7-3｜ ・ ・ ・ というのができません。 上のタブを操作すると 下のコンテンツが消えてしまい 下のタブを操作すると 上が消えたり また複数タブできた場合は 複数箇所同時はできませんでした。 javascript初心者の私にどなたかご教授を。 コンテンツそのものを消すやり方でもいいですが なるべくclassを変更で消す方法がいいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- Java GUI タブ切り替えについて
初投稿させていただきます。 至らない点がありましたらご指摘ください。 Java初心者です。 現在、NetBeansを使用して、以下の画面を作成しています。 「jtabbedpaneにPanelを複数追加し、タブ切り替えが行える画面」 画面は作成できるのですが、タブの切り替えに悩んでいます。 タブが右クリック、中クリック(ホイール)でも切り替わってしまいます。 左クリックのみを許容するような方法は無いのでしょうか？ 自分の調べ方が悪いのか、検索しても解決方法が見つからず投稿させていただきました。
- ベストアンサー
- Java
- タブ切替えメニューの懸念点について教えてくだい
いつもお世話になっています。 ＷＥＢサイトのリニューアルを計画しています。 予定では、以下のような遷移を考えており、コンテンツ2、もしくは、コンテンツ3に 最終の情報が入ります。 トップメニュー ＞ コンテンツ1 ＞ コンテンツ2 ( ＞ コンテンツ3 ) コンテンツ1、コンテンツ2は、1ページあたりの情報量が多く、長いページになる 予定なので、以下のサイトのようなタブ切替メニューを利用しようと考えています。 http://archiva.jp/web/javascript/tab-menu.html カテゴリ1 と カテゴリ2 両方のページでタブ切替えメニューを使った場合、 ユーザービリティの面やその他の面で懸念することがあれば ご教示いただきたいです。
- ベストアンサー
- CSS
- タブ切り替えが出来る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を少し編集すればできそうな気がするのですが、 もうお手上げになっちゃいました。 申し訳ないのですが、どなたか教えていただければと思います。 よろしくお願いします。
- ベストアンサー
- JavaScript
- Java Scriptの書き方について教えて下さい。
Java Scriptの書き方について教えて下さい。 独学なので超初歩的な質問ですが、Java Scriptを外部ファイルにしたいと思っておりますが、外部ファイルには何を記述し、（<head></head>、<body></body>)の中には何を書いたらよくかわかりません。 現在はタグの中にスクリプトを記述しています。あるいは意味も判らずにコピペしています。 初心者にも判りやすい参考書かサイトをご存じでしたら教えて下さい。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- Java Scriptの件で質問をさせて頂きます。よろしくお願いいたし
Java Scriptの件で質問をさせて頂きます。よろしくお願いいたします。 よく、ホームページの一番下に「このページのトップへ」とか「ＨＯＭＥ」などとあり、それをクリックすると、当該のページの一番上まで行くものがありますが、あれはJava Scriptを使っているのでしょうか ？私としては、出来るかどうかは不明なのですが、Java Scriptをcssのような感じで外部ファイルにして「このページのトップへ」を作成したいと考えております。どなた様かご指導のほどよろしくお願いいたします。 また、「このページのトップへ」にやはり何らかのリンクを張るのだと思いますが、その点に付きましてもご指導をどうかよろしくお願いいたします。 また、話は少し変わってしまうのですが、ロールオーバーをホームページの上部に横に並べて表示させたいのですが、このようなこともJava Scriptで出来るのでしょうか？現在はcssで試行錯誤している最中ですが、Java Scriptでも可能ならとも考え合わせてご質問をさせて頂きました。 どなた様か、ご指導のほどよろしくお願いいたします。
- ベストアンサー
- JavaScript
- ＨＴＭＬにジャバスクリプトを書く位置は？
http://archiva.jp/web/javascript/tab-menu.html 上記のサイト「タブ切替ジャバスクリプトプログラム」は、上下２つのスクリプトに分かれています。 上のスクリプトは、「置き場所は</body>直前を勧めとく」と解説されています。 下のスクリプトは、「先の起動部分より先に宣言されていなければならない」と解説されています。 それなら、上下を逆にして１個のスクリプトで書けば良いのではないでしょうか？ http://hyper-text.org/archives/2007/09/javascript_tab.shtml その問題を解消する為に、上記のサイトでは「window.onload=function() 」で上のスクリプトを囲んでいます。 どうして、この様な解決法になるのでしょうか？
- ベストアンサー
- JavaScript
- タブの切り替えについて
こちら（http://5am.jp/jquery/jquery_ui_tabs/）のサイトを参考に JSはそのまま使用し、CSSのみ少し手を加えて、タブの切り替えを作成したのですが、 タブを切り替える度にページトップへスクロールしてしまいます。 JSに手を加えてこれを回避する方法はあるのでしょうか？
- 締切済み
- JavaScript
- bootstrap3 タブ切替え内でのjquery
Bootstrap3のTab機能を使い、ページ遷移を行っているのですが、その際にタブ切り替えを行うと 切り替わったコンテンツ内のjavascript が機能しなくなります。 利用しているjquery はbxsliderです。 タブ１内で動いているスライダー、カルーセルをそのままタブ２、３、４にコピーしても動きません。 知識のある方の回答をお待ちしております。 宜しくお願いいたします。
- 締切済み
- JavaScript
- LAVIE A23でテレビスイッチの作動ができない問題が発生しています。
- また、テレビ視聴中にテレビスイッチを押してもテレビが終了しない現象も発生しています。
- その他の機能やモードでは異状はなく、正常に作動していますが、昨年12月に購入したばかりの製品です。
補足
上記本当にありがとうございます。 ただ実装してみると、既存のインラインフレームエリアにすべてのリンクが集約してしまいます。 ◆キャプチャ http://blog.livedoor.jp/soken2ch/sample/sample.jpg こんな風になってしまいます。キャプチャのとおり、page8以降は赤い部分に出力したいのですが、どうすればいいでしょうか。 何度も申し訳ございません。