- ベストアンサー
擬似フレームでのページ内リンクについて
- 擬似フレームの横分割のレイアウトで、左に位置固定された折りたたみ式メニュー右にメイン画面を置いてあります。左で折りたたみメニューを開き、ページ内リンクで右に出てくる本文の項目ごとにリンクさせたいんですが普通にaタグを設置してみても上手くいきません。
- 折りたたみメニューの左側にあるaタグをクリックすると、右側の本文の該当する項目にスクロールするようにしたいんですが、いくつか試してみたもののうまくいきませんでした。
- どのように設定すれば、折りたたみメニューを使用したページ内リンクが正しく機能するのでしょうか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 補足の構文で「ABC」「DEF」どちらにも綺麗に飛びますよ。 スクロールバーを発生させないと分かりづらいんだと思います。 「ABC」と「DEF」間にじゅうぶんな間隔を空けて検証しました。
その他の回答 (1)
- torayoshi
- ベストアンサー率62% (910/1449)
え～と… ページ内リンクということは、メニューの「ABC」をクリックすると メインの「ABC」の頭に飛ぶで良いんですか？ だと仮定すると、 <li><a href="text.html#abc">ABC</a> になると思いますが。 ただ、質問の構文だと左右に分かれずうまく検証出来ませんでした。
補足
すみません。ミスです。 以下のソースでいかがでしょうか？ text.htmlのソース <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> #PAGETOP { margin: 0px auto; max-width: 700px; } #HEADER {margin-bottom: 1.5em;} #MENU { width: 220px; padding-top: 20px; position: fixed; left: 30px; top: 0px; font-size: 85%; } </style> <script type="text/javascript"> <!-- function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj)obj.style.display=(obj.style.display=="none")?"block":"none"; } } // --> </script> </head> <body> <div id="PAGETOP"> <div id="HEADER"> </div> ----左メニュ----- <div id="MENU"> <h2>menu</h2> <ul> <li><a href="text.html" onclick="oritatami('o0');return false">メニュー</a></li> <div id="o0" style="display:none"> <ul> <li><a href="#abc">ABC</a> <li><a href="#def">DEF</a> </ul> </ul> </div> ----右メイン------ <div id="KIZI"> <h2 id="abc">ABC</h2> <div class="text"> テキストテキスト </div> <h2 id="def">DEF</h2> <div class="text"> テキストテキスト </div> </div> </div> </body> </html>
お礼
解決できました。 私のタグミスだったみたいです。 つまらない質問に回答していただき、ありがとうございました！！