- ベストアンサー
リンク押下でタグを書き換えたい
- 複数のリンクがあり、押したリンクの文字を<span></span>で囲んで表示したい。
- 対応するdivタグのdisplay属性も書き換えたい。
- シンプルに書く方法はないですか？ご助言ください。
- ginfix
- お礼率34% (330/968)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ANo1です。 ＞とりあえず動くことは確認できるかと思うのですが とりあえず、コピペで動かすと手元のIE８では途中で止まるようです。 少しだけ調べてみると、どうやら7行目の document.getElementById('div2') でnullが返されているようです。（原因はパッと見ではわかりませんでした。一見問題ないようなのですが…） 後で fx34で確認したところ、動作しました。 勝手に雰囲気から想定した「表示を切り替える」ものの簡略サンプルをご参考までに。 ・HTMLの書き換えはしていません。 ・簡略化のためページ内リンクも省きましたが、残しても良いかも。 ・項目の数は可変です。（メニュー順とdiv順は整合しているものとしています） ・表示中メニューにはactiveクラスを設定しているので見え方等はCSSで制御可能。 （インデントが全角空白になっていますので半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #menu li{ color:black; cursor:pointer; background-color:#CCC; border-bottom:1px solid white; } #menu li.active{ color:blue; cursor:auto; background-color:#CCE; } #tabs>div{ display:none; } #tabs>div.active{ display:block; } </style> </head> <body> <ul id="menu" onclick="hoge(event)"> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> </ul> <div id="tabs"> <div>test1</div> <div>test2</div> <div>test3</div> <div>test4</div> </div> <script type="text/javascript"> var hoge = (function(){ var i, e, tabs=[]; var menus = document.getElementById("menu").getElementsByTagName("li"); var tmp = document.getElementById("tabs").childNodes; for(i = 0; e = tmp[i++];) if(e.nodeName=="DIV") tabs.push(e); return function(evt){ var i, t = evt.target || evt.srcElement; for(i=0; i<menus.length; i++){ var e = menus[i], f = e==t?"active":""; e.className = f; if(tabs[i]) tabs[i].className = f; } } })(); document.getElementById("menu").getElementsByTagName("li")[0].click(); </script> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
「デザインのためにHTMLを書かない」「極力javascriptに頼らない」はウェブページの基本です。 単に目次をクリックしての対象項目の表示のように見受けられますからHTMLは率直に <section> <nav> <ul> <li><a href="#section1">セクション1</a></li> <li><a href="#section1">セクション1</a></li> </ul> </nav> <section id="section1"> <h3>セクション1</h3> <p> このセクションの内容 </p> </section> <section id="section2"> <h3>セクション2</h3> <p> このセクションの内容 </p> </section> </section> HTML4.01、XHTML1.0等 <div class="section"> <div class="nav"> <ul> <li><a href="#section1">セクション1</a></li> <li><a href="#section1">セクション1</a></li> </ul> </div> <div class="section" id="section1"> <h3>セクション1</h3> <p> このセクションの内容 </p> </div> <div class="section" id="section2"> <h3>セクション2</h3> <p> このセクションの内容 </p> </div> </div> として、スタイルシートでプレゼンテーションを指定したほうが良いでしょうね。 印刷だと、すべて印刷できるし、携帯電話では普通にリンクできるし、SEO検索エンジンにも内容を理解させられるし、javascriptを無効にしてても利用できるし・・
補足
カレーの美味しい作り方を聞いているのに、シチューのほうがいいですよといわれても。
- fujillin
- ベストアンサー率61% (1594/2576)
回答ではありませんが・・・ ＞押したリンク文字だけ<span></span>のみにしたいと ＞思っています。 とのことですが、なんとなくの雰囲気ではいわゆるタブ表示とほとんど同じ内容なのではないでしょうか？ その場合、ご質問文で明記なさっていますが、リンクの構成（HTML）をいちいち書き換える必要があるのでしょうか？ （クリックしても無視すれば良いだけ、あるいは処理しても問題ないかと） また、ご提示のスクリプトは動作しないと思うのですが・・・？？ 勝手な想像で書かせていただくと… 『リンク部のメニューをクリックしたら、それに対応したDIV要素が表示される』というのでよければ・・・ 1）リンク群（=UL要素）のクリックイベントを取得 2）クリックされたLI要素の順番に対応するDIVを表示、それ以外は非表示 とすることで、引数を渡したりidに頼る必要がなくなるので、記述は簡潔になると思います。 一般化しておくことで、リンクの数が変わってもスクリプトを修正する必要はなくなりますし、HTMLにonclick="～～"をたくさん書く必要もなくなるのではないでしょうか。 リンクの順とDIVの順が異なる場合は、それらを結び付けるデータだけ事前に定義（配列など）しておく必要があるかも知れません。 意味が違っていたら無視してください。
補足
ご回答ありがとうございます。 >また、ご提示のスクリプトは動作しないと思うのですが・・・？？ 上記テキストファイルにコピペで、拡張子htmlにしていただければ とりあえず動くことは確認できるかと思うのですが…どこで動かないと 判断なされたのでしょうか？
補足
ありがとうございます。 手元のIE11では特に問題がなかったのですが、念のためモードを変えて見てみます。