- ベストアンサー
iframe内のメニューをクリックで変更したい
ホームページビルダーでHPを作成しています。 ２カラムのページで、左側のカラムにメニューがあります。 複数ページ作成するので、メニューは手間を省けるiframeで表示させようと思っています。 iframeのメニューは基本的には日本語ですが、ボタンを押すと 英語と中国語にメニューに入れ替わるようにしたいと思っています。 どのようにすれば、上記が実現できるでしょうか？ ※Javascriptを使用しないと実現できないでしょうか？できれば、Javascript無しで実現したいと考えています。 どうぞ、アドバイスをよろしくお願い致します。 m（＿ ＿）m
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
targetとnameで出来ると思います。 下記サイトのサンプルコードで確認してください。 http://www.tagindex.com/html_tag/frame/iframe_name.html
その他の回答 (2)
- sora1tora2
- ベストアンサー率69% (27/39)
こんにちは Javascript無しで実現するとなるとこんな感じでしょうか <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-16" /> <meta http-equiv="content-Language" content="ja" /> <meta http-equiv="content-style-type" content="text/css" /> <title>title</title> <meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> <meta name="discription" content="コンテンツの概要" /> <meta name="author" content="名前" /> <meta name="copyright" content="著作権" /> <style> *{ margin: 0; padding: 0; font-family:Microsoft Yahei; } body,html { margin:0; padding:0; } #wrap { margin: 0px; padding: 0px; width: 150px; } #navi { margin: 0px; padding: 0px; width: 150px; height: 40px; } #navi ul { margin: 0px; padding: 0px; } #navi ul li { margin: 0px; padding: 0px; height: 20px; width: 150px; list-style-type: none; } #navi ul li a { margin: 0px auto; padding: 0px; text-decoration: none; font-weight: bold; font-size: 14px; line-height: 20px; color: #ff0000; outline: none; } #navi ul li a:hover { color: #0000ff; } #main { margin: 0px; padding: 0px; width: 150px; height: 180px; overflow: hidden; } #main .menu { margin: 0px; padding: 0px; height: 180px; width: 150px; } #main .menu ul { margin: 0px; padding: 0px; } #main .menu ul li { margin: 0px; padding: 0px; height: 30px; width: 150px; } #main .menu ul li a { margin: 0px; padding: 0px; height: 30px; width: 150px; display: block; color: #000000; line-height: 30px; outline: none; } #main .menu ul li a:hover { color: #ff0000; } </style> </head> <body> <div id="wrap"> <div id="main"> <div class="menu"> <ul> <li><a href="#" name="jp">トップ</a></li> <li><a href="#">ホーム</a></li> <li><a href="#">メイン</a></li> <li><a href="#">コンエンツ</a></li> <li><a href="#">メール</a></li> <li><a href="#">サイトマップ</a></li> </ul> <!--//日本語用メニュー--></div> <div class="menu"> <ul> <li><a href="#" name="en">TOP</a></li> <li><a href="#">HOME</a></li> <li><a href="#">MAIN</a></li> <li><a href="#">CONTENTS</a></li> <li><a href="#">MAIL</a></li> <li><a href="#">SITE MAP</a></li> </ul> <!--//英語用メニュー--></div> <!--//main--></div> <div id="navi"> <ul> <li><a href="#jp">日本語</a></li> <li><a href="#en">English</a></li> </ul> <!--//navi--></div> <!--//wrap--></div> </body> </html> 古いバージョンのブラウザによってはＣＳＳハックが必要ですが、 参考になればいいのですが。
お礼
sora1tora2さま 大変具体的、且つ、詳細なご説明ありがとうございました。 書いて頂いたコードは、そのまま使わせて頂ければと思います。 iframeで実現するのと比較して、自分にあった方法でページを作れればと思います。 それにしても、これだけの内容をスラスラと書けてしまうsora1tora2さまは、かなり高度な知識をお持ちになっているんだなーと、とても驚いています。 私も、もっと勉強して頑張りたいと思います。
- abacabu
- ベストアンサー率37% (250/663)
独学でＷＥＢサイトを作成している者です。 どうせiframeでメニュ―を表示するならtarget属性で、3種類のメニューを用意してクリックで変更するようにするしかないのでは？と思います。３言語分ぺージ作るのも大変でしょうが頑張って下さい。
お礼
ご回答ありがとうございました！ はい、target属性でやろうと思います。 具体的には、最初の回答者様の内容で良く分かりました。 アドバイスありがとうございました。
お礼
shiren2さま ご回答ありがとうございました！ やりたかったのは、ズバリこれです！ とても参考になるURLもありがとうございました！ 大変助かりました！