- ベストアンサー
どのリンクが表示されているかのスクリプトを作るには？
こんばんわ。 http://www.umechando.com/javascript/index.html様の左側にあるメニュー部分なんですが、リンクをクリックするとそのリンク部分の左側に、赤い矢印の画像が表示されます。 これは、スクリプトで処理されているようなんですが、どのような構造になっているのでしょうか？ ヒントでもサンプルでもいいので、よろしくお願いします。
- burazer
- お礼率53% (7/13)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ソースを見てみればわかります。 ｊｓはmenu.jsにあります。 onmousedownで各アンカーから呼び出して、イメージの中身を矢印とそうでないもの（透明？）と取り替えているみたいです。 ANo1様の回答のように、CSSを利用して表示/非表示で処理したほうが簡単だと思われます。 ＜サンプル＞（hoverの処理は除いています。liの数は自由） <html> <head> <style> #menu {list-style: none;} #menu li{line-height:200%;} </style> <script> window.onload=function(){ var imgarrow= '<img src="./arrow.gif" style="visibility:hidden;">'; //←矢印の画像表示タグ var e=document.getElementById('menu').getElementsByTagName('li'); for (var i=0; i<e.length; i++){ e[i].innerHTML=imgarrow + e[i].innerHTML; e[i].getElementsByTagName('a')[0].onclick=function(){arrow(this);}; } } function arrow(m){ var img=document.getElementById('menu').getElementsByTagName('img'); for (var i=0; i<img.length; i++){ img[i].style.visibility=(img[i].parentNode==m.parentNode)?'visible':'hidden'; } } </script> </head> <body> <ul id="menu"> <li><a target="main" href="http://www.yahoo.co.jp/"> Yahoo</a></li> <li><a target="main" href="http://www.google.co.jp/"> Google</a></li> <li><a target="main" href="http://www.infoseek.co.jp/"> infoseek</a></li> </ul> </body> </html>
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
#2です。 ＞ページが開いた時に矢印の画像が表示されません。 1番最初に開いた時のことでしょうか？ それとも、リンクしたページが読み込まれたときでしょうか？ 後者だとすると意図せざるところなので、じっくり考えて見る必要があります。 前者だとすると、それで正常な動作です。 メニューの内容が不明なこともあり、一番最初はどこに矢印を表示するかわかりませんし、そもそも表示するのかしないのかもわかりませんのでこのようにしてあります。（あくまでサンプルなので） 表示したければ、最初に（リストタグの）ｎ番目の画像（矢印）のvisibilityをvisibleにしておけばよいだけです。 つぎはぎ方式になってしまいますが、最初（2箇所あるうち上のほう）の } } の間に1行追加して、 } e[1].getElementsByTagName('img')[0].style.visibility='visible'; } のようにすれば、指定した番号のリストが最初から表示されます。 e[1]の[]の中の数字が、最初に表示するリストの番号になります。（スクリプトでは最初の番号が0になっています） 上の例では[1]にしているので、上から2番目のメニューの画像（矢印）が最初に表示されることになります。
お礼
ご丁寧にありがとうございました。なんとか出来ました。 これを期に、少しでも勉強してから出直してこようと思います。 なんでもかんでも聞いてたら、いつまで経っても自分でプログラム作れませんからね・・ どうも、ありがとうございました。
- SAYKA
- ベストアンサー率34% (944/2776)
やり方色々じゃないのかな クリックされた時に他の矢印画像を visibility:hidden にしてクリックしたやつを visible に変更っていうのが簡単な気がする。
お礼
なるほど。そのようなやり方があるのですね。参考にさせていただきます。
補足
サンプルまで提示してくださってありがとうございます。 さっそくローカルで表示させて見ました。すると、クリックされるごとに画像が動いたんですが、ページが開いた時に矢印の画像が表示されません。 http://www.umechando.com/javascript/index.html様のページでは、ページが開いた時に、すでに画像が表示されているんでけども、どうなってるのでしょうか？