htmlとjavascriptについての質問です。
ページ遷移なしで表示内容を切り替えるために、タブによる表示内容の切り替えページを作成しております。
参考にしているサイトは、
http://nais.to/~yto/tools/css_tabs/
です。
タブの作成までは問題なく完成しました。
しかし、切り替わる表示内容の入力で重要な問題に気づきました。
それは、frameを用いたページを切り替えようとしていたことです。
<body>の下にタブの切替があり、そして、そのタブの中に<frame>を使っていることになります。
通常、frameを使用するときはbodyを使えない(frameがbodyの代わりになる)ことになっているので、エラーが出て、frameを使った内容が表示されなくなってしまいました。
タブによるframeを使ったページを切り替える方法がありましたら、どなたかお教え頂けないでしょうか?
インラインフレームの中にframeを使ったページを入れての切替はできるのですが、それだとインラインフレーム内でページ遷移してしまい都合が悪いのです。
お手数ですが、どなたかよろしくお願い致します。
No.2ベストアンサー
- 回答日時:
>それだとインラインフレーム内でページ遷移してしまい・・・
多分、location.hrefの切り替えで表示しているのですよね?
試してないけど、表示にはiframeを利用して、サンプルのdivと同様にiframeの表示/非表示だけを制御してあげれば、再読込みはおきないので問題にはならないのでは?
(最初に、それぞれのフレームに各htmlを読込んでおく)
最初の読込み時間は、当然、しかたがないとしていいんですよね?
>fujillin様
入力フォームの質問に引き続き、御回答ありがとうございます。
iframeの表示/非表示の切替‥
ありがとうございます。
仰るとおり、この方法だと再読込は起きそうにないですね。
もちろん最初の読込は問題ございません。
ありがとうございました。
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
この回答への補足
>yyr446様
御回答ありがとうございます。
ご提案された方法は思いつきませんでした。
しかし、この方法だと、タブをクリックする毎にサーバーを読んでしまいまして、iframeを避けた理由もそこにあるのです。
例えば、
タブ1に住所などの入力フォーム、
タブ2は入力のヘルプページ、
とします。
iframeなどの方法だと、タブ1での入力の最中に、タブ2を開き、またタブ1に戻ったときに入力途中の内容が消えてしまいます。
質問の際に参考にしているサイトの方法では、一度アクセスすれば、全てクライアントサイドで行えるので、採用していたのです。
参考サイトですが、なぜかリンクが化けてしまっていました。
http://nais.to/~yto/tools/css_tabs/
↑が正しいURLです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
<body id=~>の用途は?
-
複数のiframeの読み込みについて
-
テキストボックス内にハイパー...
-
ページによって表示位置がずれ...
-
ハイパーリンクに下線を表示す...
-
bodyにwidth:100%をつける理由は?
-
(Javascript)印刷するファイル...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
javascriptでalertの文字列をコ...
-
変数の代入値を外部の.txtファ...
-
レンタルサーバーでjavascript...
-
毎回、ページ読み込み時に1回...
-
ジャバスプリクトでフレームの...
-
JavaScript ランダムリンク+自...
-
jQueryBlockUIをフレーム内で動...
-
window.openで同画面遷移しない
-
Jqueryの干渉について
-
UWSCでインナーテキストが...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
ハイパーリンクに下線を表示す...
-
(Javascript)印刷するファイル...
-
テキストボックス内にハイパー...
-
"mailtoでメールの【氏名】【性...
-
別ページのページ内リンクでの...
-
iframeのsrcにページ内リンク(...
-
bodyにwidth:100%をつける理由は?
-
WEB上で編集できない、スク...
-
bodyタグって2重にしようするこ...
-
リンクをクリックすると文字が...
-
複数のiframeの読み込みについて
-
「overflow: hidden」ペー ジ内...
-
HTML文でiframe srcで参照表示...
-
スクロールバーのスクロール量...
-
横スクロールを右から左へ・・・
-
Chromeがiframe内の「#~」に釣...
-
htmlで任意の行の文字位置を右...
-
テキストをクリックすると答え...
-
<HR>タグでつくる四角形につい...
おすすめ情報