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で質問しましょう!
似たような質問が見つかりました
- JavaScript 指定時間になったら、WEBサイトの更新を自動で行うには…? 3 2022/04/28 22:14
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP 掲示板のセキュリティについてアドバイスお願い致します 1 2023/08/11 20:44
- PHP $_SESSIONに渡した後はそのまま使っても問題ありませんか? 3 2022/11/08 22:17
- その他(ソフトウェア) 時間差でのオートクリック 1 2023/04/12 12:04
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- Android(アンドロイド) Android端末(arrows we FCG01)のタブの切り替え方について 2 2023/01/02 10:59
- Word(ワード) Google ドキュメントで改ページを挿入する方法 1 2022/05/25 19:22
- その他(プログラミング・Web制作) パイソンでのプログラミングについて 3 2022/08/11 20:31
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
(Javascript)印刷するファイル...
-
【HTML】フレームの中央寄せに...
-
iframeのsrcにページ内リンク(...
-
テキストボックス内にハイパー...
-
テキストをクリックすると答え...
-
googleマイマップとのリンクを...
-
htmlで任意の行の文字位置を右...
-
divやiframeの読み込み時バグ @...
-
bodyにwidth:100%をつける理由は?
-
<NOSCRIPT>
-
wordpressでアコーディオンメニ...
-
スクロールバーのスクロール量...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
複数のJavascriptを1つのscrip...
-
base64encodeでの文字化けについて
-
入力したテキストボックスのデ...
-
ウインドウの後ろに隠れている...
-
JavaScriptでiframeの内容を「...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bodyにidをつける理由は何ですか?
-
テキストボックス内にハイパー...
-
(Javascript)印刷するファイル...
-
ハイパーリンクに下線を表示す...
-
別ページのページ内リンクでの...
-
横スクロールを右から左へ・・・
-
bodyにwidth:100%をつける理由は?
-
ボタンが押されたらWebページの...
-
テーブル内の数値を自動で計算...
-
"mailtoでメールの【氏名】【性...
-
ページの読み込みが完了してか...
-
テキストをクリックすると答え...
-
インラインフレーム内のスクロ...
-
<body id=~>の用途は?
-
複数のiframeの読み込みについて
-
Chromeがiframe内の「#~」に釣...
-
-css- ページオープン時やリロ...
-
ページによって表示位置がずれ...
-
<HR>タグでつくる四角形につい...
-
リンクをクリックすると文字が...
おすすめ情報