- 締切済み
リンクの色を保持
iframeに表示されたページが、main.htmlのどのリンクを表示しているか分かるよう、main.htmlのページが表示された時に、リンク1の背景に色をつけたいと思っています。そして、リンク２がクリックされた時は、リンク２をクリックしていることが分かるよう、リンク１の背景の色をなくしリンク２の背景に色をつけたいと思っています。 つまり、 （１）main.htmlのページが表示された時に、リンク1の背景に色をつける （２）リンク２がクリックされた時は、リンク１の背景の色をなくしリンク２の背景に色をつける （３）リンク３がクリックされた時は、リンク２の背景の色をなくしリンク３の背景に色をつける をしたいと思っています。どのようにすればいいでしょうか？よろしくお願いします。 <--test.html--> <html> <head> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <Title>テスト</Title> </Head> <body> <ul> <li><a href="main.html">main</a></li> </ul> </body> </html> <--/a.html--> <Html Lang="ja"> <Head> <Meta Http-equiv="content-type" Content="text/html; charset=Shift_JIS"> <Title>テスト</Title> </Head> <Body> <iframe src="http://yahoo.co.jp" name="test"></iframe> <ul> <li><a href="http://yahoo.co.jp" target="test">リンク1</a></li> <li><a href="http://www.goo.ne.jp/" target="test">リンク2</a></li> <li><a href="http://www.biglobe.ne.jp/" target="test">リンク3</a></li> </ul> </Body> </Html>
- burazer
- お礼率53% (7/13)
- JavaScript
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
http://oshiete1.goo.ne.jp/qa4475263.html これと同じでいいんじゃない？
スクリプトを</body>の直前に入れましょう！ <head></head>内に入れたければ window.onload = function(){ ここにdocument.body.onclick = ～ }
補足
お返事ありがとうございます。 実際に入れて動作させてみました。 しかし、「（１）main.htmlのページが表示された時に、リンク1の背景に色をつける」ってのが機能してません。 それから、説明不足だったとこがあるのですが、リンク以外の部分をクリックした場合にはそのリンクの背景色を保持しておきたいのです。そして、リンクがクリックされたら背景色を変更するって言う風にしたいのです。 で、「リンク以外の部分をクリックした場合・・・変更するって言う風にしたいのです。」の部分なんですが、具体的に言うと、下記サイト様の右側にある「content menu」ってとこのような感じです。 http://f32.aaa.livedoor.jp/~azusa/index.php?t=js&p=iframe もう少し早めに言えばよかったのですが、申し訳ありません・・・どうぞ、よろしくお願いします。
document.body.onclick = function(e){for(var i=0,p=(e?e.target:event.srcElement),o=document.getElementsByTagName('a');i<o.length;i++)o[i].style.backgroundColor = (o[i].target=='test' && o[i]==p)?'#f00':'';}
補足
お返事ありがとうございます。 サンプルスクリプトを元に下記のプログラムを作ってみましたが、動作しません。どこがいけないのでしょうか？よろしくお願いします。 <Html Lang="ja"> <Head> <script type="text/javascript"> <!-- document.body.onclick = function(e){for(var i=0,p=(e?e.target:event.srcElement),o=document.getElementsByTagName('a');i<o.length;i++)o[i].style.backgroundColor = (o[i].target=='test' && o[i]==p)?'#333333':'';} --> </script> </Head> <Body> <iframe src="http://yahoo.co.jp" name="test"></iframe> <ul> <li><a href="http://yahoo.co.jp" target="test">リンク1</a></li> <li><a href="http://www.goo.ne.jp/" target="test">リンク2</a></li> <li><a href="http://www.biglobe.ne.jp/" target="test">リンク3</a></li> </ul> </Body> </Html>
お礼
できました～～！！ なかなか同じような回答がなかったので、どうやってやればいいかずっと困っていました・・・ 本当にありがとうございました。