- ベストアンサー
JavaScriptを使ってアンカーリンクでテキストを変更する方法
- JavaScriptを使ってアンカーリンクでテキストを変更する方法を解説します。
- 困っている方のために、同じページ内でアンカーリンクを使ってテキストを変更するためのスクリプトを提供します。
- 参考URLもご提供するので、詳細な手順や具体的なサンプルコードを確認することができます。
- keeeeeeeen
- お礼率56% (160/282)
- JavaScript
- 回答数3
- ありがとう数9
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ごめんね、めんどくさくてテストしてないけど まずアンカーを <A href="javascript:change('A')">A</A> <A href="javascript:change('B')">B</A> <A href="javascript:change('C')">C</A> っていうふうにしてjavascriptで function change(str) { var nodes = document.getElementsByTagName("div"); var class; for(var i = 0; i < nodes.length; i++) { class = nodes[i].className if (class == "A") { if (str == class) { node[i].style.display = "block"; } else { node[i].style.display = "none"; } else if (class == "B") { if (str == class) { node[i].style.display = "block"; } else { node[i].style.display = "none"; } } else if (class == "C") { if (str == class) { node[i].style.display = "block"; } else { node[i].style.display = "none"; } } } } 方法論としてはこんな感じ。 本当はもっと関数化とかするべきだけど 質問文の例文じゃ本当はどんなHTMLなのかは分からないから 適宜自分で使いやすいようにカスタマイズして。 （ていうかテストしてないから多分どっか動かないけど‥） idとか付けれるなら getElementByIdとか使って、for文使わなくていいんだけどね。 ‥ おい、ラーメン伸びたじゃないか。
その他の回答 (2)
- OKbokuzyo
- ベストアンサー率43% (130/296)
え？jquery使ってんの？ それ早く言ってよ。 ラーメン伸びたのすごい無駄じゃん。 $(".A").css("display", "none"); でいいよ。
お礼
すいませんww すごく助かりました!!
- zeff
- ベストアンサー率69% (137/198)
参考というかスクリプト例を。 targetを特定しているのでclassでなくてidで。 <!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-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css"> <!-- div#A,div#B,div#C{ display:none; } span{ cursor:pointer; } --> </style> <script type="text/javascript"> <!-- var focused = null; function Sample(id){ if (focused == id){ document.getElementById(id).style.display = 'none'; focused = null; }else{ if (focused != null){ document.getElementById(focused).style.display ='none'; } document.getElementById(id).style.display = 'block'; focused = id; } } // --> </script> </head> <body> <span style="margin-right:15px;" onclick="Sample('A')">A</span><span style="margin-right:15px;" onclick="Sample('B')">B</span><span onclick="Sample('C')">C</span> <div id="A"> ○○○○○<br> ○○○○○<br> ○○○○○<br> </div> <div id="B"> □□□□□<br> □□□□□<br> □□□□□<br> </div> <div id="C"> △△△△△<br> △△△△△<br> △△△△△<br> </div> </body> </html>
お礼
ありがとうございます。 さっそく試してみます。
お礼
早速の回答ありがとうございます。 基本的にはID付いてるので関数化してしまいたいです。 jquery.jsとかもいれてるのでgetElementByIdとかは使わなくても大丈夫です。 ラーメンの件ごめんなさい。 ここでおいしいラーメン屋さんでも探してください。 http://ramendb.supleks.jp/