• ベストアンサー

タブページの中にframeページを作成できますでしょう?

htmlとjavascriptについての質問です。 ページ遷移なしで表示内容を切り替えるために、タブによる表示内容の切り替えページを作成しております。 参考にしているサイトは、 ​http://nais.to/~yto/tools/css_tabs/​ です。 タブの作成までは問題なく完成しました。 しかし、切り替わる表示内容の入力で重要な問題に気づきました。 それは、frameを用いたページを切り替えようとしていたことです。 <body>の下にタブの切替があり、そして、そのタブの中に<frame>を使っていることになります。 通常、frameを使用するときはbodyを使えない(frameがbodyの代わりになる)ことになっているので、エラーが出て、frameを使った内容が表示されなくなってしまいました。 タブによるframeを使ったページを切り替える方法がありましたら、どなたかお教え頂けないでしょうか? インラインフレームの中にframeを使ったページを入れての切替はできるのですが、それだとインラインフレーム内でページ遷移してしまい都合が悪いのです。 お手数ですが、どなたかよろしくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

>それだとインラインフレーム内でページ遷移してしまい・・・ 多分、location.hrefの切り替えで表示しているのですよね? 試してないけど、表示にはiframeを利用して、サンプルのdivと同様にiframeの表示/非表示だけを制御してあげれば、再読込みはおきないので問題にはならないのでは? (最初に、それぞれのフレームに各htmlを読込んでおく) 最初の読込み時間は、当然、しかたがないとしていいんですよね?

yamaps
質問者

お礼

>fujillin様 入力フォームの質問に引き続き、御回答ありがとうございます。 iframeの表示/非表示の切替‥ ありがとうございます。 仰るとおり、この方法だと再読込は起きそうにないですね。 もちろん最初の読込は問題ございません。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

ご参考のタブメニューの仕組みでは、どう考えても無理そうです。 その仕組みは、javascriptで<div>ブロックのスタイル属性を、 表示・非表示制御して実現しているものだから。おっしゃるように <frame set>をおけません。iframeを使って <div id="box2"> <iframe src="fuga.htm"></iframe> </div>にすれば、出来ますが 理由がよくわかりませんが?iframeは、いやなのですね。 となると、frameページのトップページからフレーム対応した タブメニューを使わざるをえないでしょう。(おそらく) frameページでタブによってページを切り替える方法は↓にありました。 http://technique.eweb-design.com/0906_tbf.html

yamaps
質問者

補足

>yyr446様 御回答ありがとうございます。 ご提案された方法は思いつきませんでした。 しかし、この方法だと、タブをクリックする毎にサーバーを読んでしまいまして、iframeを避けた理由もそこにあるのです。 例えば、 タブ1に住所などの入力フォーム、 タブ2は入力のヘルプページ、 とします。 iframeなどの方法だと、タブ1での入力の最中に、タブ2を開き、またタブ1に戻ったときに入力途中の内容が消えてしまいます。 質問の際に参考にしているサイトの方法では、一度アクセスすれば、全てクライアントサイドで行えるので、採用していたのです。 参考サイトですが、なぜかリンクが化けてしまっていました。 http://nais.to/~yto/tools/css_tabs/ ↑が正しいURLです。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • インラインフレームの中フレーム

    インラインフレーム内に、フレームを縦分割して使いたいと思っています。 フレームは左・右でわけて左側にメニュー、右に内容としたいので メニューのリンクでは target=migi としました。 そうするとフレームにおいては問題なく表示してくれますが、これをインラインフレームの中にいれると左メニューをクリックすると新しいページが開いてしまいます。 そもそもインラインフレーム内にさらにフレームとすると対応していないブラウザもあって、あまりよくないようですが、別の方のHPがそうなっているようで気になっています。 うまく言葉で表現できませんので、以下にURLを置いときます。 http://839.fc2web.com/ →PHOTOのような感じ 初心者です、初歩的なことかもしれませんが、よろしくお願いします。

  • フレーム内に表示されているページのURLを取得して「進む」に割り当てることは可能でしょうか。

    現在ホームページを作成しているのですが、インラインフレームを一部使用して 作成しております。 インラインフレーム内に表示されるページが例えば、 contents1.html~contents100.html 以上のページを表示したいと思います。 その下に「戻る」と「進む」の画像を作成リンクを設定したいと考えております。 初期段階では「contents1.html」のページがインライン内に表示されているとします。 「進む」をクリックすると「contents2.html」が表示され、再び「進む」をクリックすると「contents3.html」が表示されるようにしたいと考えております。 フレーム内に表示されているページのURLを取得して「進む」に割り当てることは可能でしょうか。 「戻る」と「進む」はフレーム外に設定されております。 インラインフレーム内のページが変わると「進む」に設定されているリンク随時が変わるようにしたいのですが、ご教授頂けたら幸いで御座います。 よろしくお願いいたします

  • フレームページからインラインフレームへのリンクの貼り方

    まず最初にHTMLでHP作成中です。フレームページ(上下に区切ってある)で、上にメニューがあります。下にインラインフレームが表示されるようにしました。インラインフレーム内にメニューの各項目(例えば・・・プロフィール、日記などです)を表示するようにリンクを設定するにはどういうタグにすればよいのでしょうか??ややこしくて頭がついてきません。お願いします。

  • フレーム対応ホームページの中のあるページへリンクを張りたい

    フレーム対応ホームページの中のあるページへリンクを張りたいのです。 フレームで区切ってあるページのメインフレームに表示されている内容を、自分で作成しているホームページのメインフレームに表示させるようにリンクを張りたいのですが、どうすればいいでしょうか。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • フレームページのタグについて。

    自分のホームページのメニューにフレームページをつくりました。このフレームページのボディにもう一個フレームページを作ることってできますか?試しにやってみたんですが、うまく表示されません。どうやらtarget=bodyってやつが二つ目のフレームのボディを指しているのに、一つ目のフレームのボディとかぶってしまうからだと思うのですが・・・。説明がうまくできなくて申し訳ないのですが、もしわかる方、サイトを知っている方、いらっしゃいましたらお願いします。

  • WEBブラウザで、ページを戻っても最後に表示したタブ切替コンテンツ(javascriptで作成)を表示する方法を教えてください。

    javascriptで、ページ遷移せずに内容をタブ切替できるページを作成していますが、別ページへリンクしたあと、ブラウザでの「戻る」やjavascriptの「history.back」で戻ったときにタブコンテンツが最後の状態で表示できる方法がありましたら教えてください。 そのページはECサイトの商品紹介のページで、一覧のカテゴリをタブで切り替えられるようにしています。 一覧から詳細ページへ遷移し、そこから一覧へ戻った時に、最後に見ていた内容がリセットされてしまうことを回避したいです。 ユーザーはついさっきまで見ていた内容にたどり着くまでに不要な煩わしさが生じてしまうので良くないのです。 どうぞよろしくお願いいたします。

  • フレームページで同じページが勝手にできてしまいます。

    よろしくお願いします。HPビルダー9.0使用してます。TOPページとリンクページが8ページあります。TOPページは通常ページでリンクページは上中下3分割のフレームページになってます。仮にAというフレームページの真ん中(Bodyて言うんですか?)を作成しました。が、その作成した内容が他のB・Cのページにも同じものができちゃってます。コピーとかした覚えはありません。同じものができてしまったページをすべて開き、そのうち一つのページの内容を消したところ、他のページの内容もすべて消えてしまいます。何でこんな事になるのでしょうか?ご存知の方よろしくお願いいたします。

  • フレームページ作成について

    フレームを使ったページを作成したいと思っていますがうまくいかないので質問です。 なお、ビルダー7を使用です。 予定としては、メニューのページをAとして、 内容をBとした時に、メニューのページをクリック すると、Bの画面だけ変わりAはそのまま残るように したいのですが、なかなかできません。 Aのメニューからリンクを張るのに、ターゲットを 右側(内容側)と設定するのですが、表示させると メニューが消えてしまいます。 メニューをそのまま残して内容だけ変えるには どのような設定にすればいいのでしょうか?

  • インラインフレームの中のフレームを透過

    お世話になります。 タイトル通りなのですが、インラインフレームの中に置いたフレームが上手く透過出来なくて困っています。 一般的にインラインフレームの中を透過する場合は <body style="background-color: transparent;"> だと思うのですが フレームの場合だとbody=framesetと読み替えるため <frameset cols="25%,*"style="background-color: transparent;"> になると思い実行しても上手くいかず。 また、透過の微調整ができるタイプのものも試しましたが 上手くいきませんでした 検索しても思ったものがひっかからないのでお手上げ状態です。 どなたか知っている方いらっしゃいましたら、お手数ですがご助言下さい。 宜しくお願いします。

  • インラインフレームを使用したページへのリンク

    インラインフレームを使用したページへのリンクで困っています。 現在、デフォルトで「A」のページにインライフレームで「B」のページを表示されており、「A」の中の「(1)」のボタンを押す事によりフレーム内が「B」から「C」、「(2)」のボタンを押すと「D」が表示されるようになっています。 このページへのリンクを作成するとインラインフレーム内は「B」のページが表示されるのですが、これを初めからフレーム内に「C」、または「D」を表示したままの状態でのリンクを作成したいのですがどうすればよいでしょうか?