JavaScriptを使ってアンカーリンクでテキストを変更する方法

前へ 次へ
このQ&Aのポイント
  • JavaScriptを使ってアンカーリンクでテキストを変更する方法を解説します。
  • 困っている方のために、同じページ内でアンカーリンクを使ってテキストを変更するためのスクリプトを提供します。
  • 参考URLもご提供するので、詳細な手順や具体的なサンプルコードを確認することができます。
回答を見る
  • ベストアンサー

JavaScriptを使ってアンカーリンクでテキストを変更したい。

JavaScriptを使ってアンカーリンクでテキストを変更したい。 JavaScriptを使ってアンカーリンクでテキストを変更したいのですがうまくいかず困っています。 A　B　C　 <div class="A"> ○○○○○ ○○○○○　←　A群 ○○○○○ </div> Bのアンカーリンクを押したら A　B　C　 <div class="B"> □□□□□ □□□□□　←　B群 □□□□□ </div> Cのアンカーリンクを押したら A　B　C　 <div class="C"> △△△△△ △△△△△　←　C群 △△△△△ </div> というように同じページ内の同じ場所にcssのdisplay（none⇔block）で表示を入れ替えるようなスクリプトが書きたいのですがわかりません。 参考URLだけでもいいので宜しくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • OKbokuzyo
  • ベストアンサー率43% (130/296)
回答No.2

ごめんね、めんどくさくてテストしてないけど まずアンカーを <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文使わなくていいんだけどね。 ‥ おい、ラーメン伸びたじゃないか。

keeeeeeeen
質問者

お礼

早速の回答ありがとうございます。 基本的にはID付いてるので関数化してしまいたいです。 jquery.jsとかもいれてるのでgetElementByIdとかは使わなくても大丈夫です。 ラーメンの件ごめんなさい。 ここでおいしいラーメン屋さんでも探してください。 http://ramendb.supleks.jp/

その他の回答 (2)

  • OKbokuzyo
  • ベストアンサー率43% (130/296)
回答No.3

え？jquery使ってんの？ それ早く言ってよ。 ラーメン伸びたのすごい無駄じゃん。 $(".A").css("display", "none"); でいいよ。

keeeeeeeen
質問者

お礼

すいませんww すごく助かりました!!

  • zeff
  • ベストアンサー率69% (137/198)
回答No.1

参考というかスクリプト例を。 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>

keeeeeeeen
質問者

お礼

ありがとうございます。 さっそく試してみます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 指定日時から7日毎にテキストとリンクを繰返す方法

    現在、手動でHTMLを毎週更新しています。 URLを含むテキストがA～Dまでありまして、一週間毎に A→B→C→D（→Aへ戻る）と繰り返し更新しています。 <div id="cm1"> □リンクA1 　テキストA1 □リンクA2 　テキストA2 □リンクA3 　テキストA3 </div> このようなセットがDまであります。div idはAから順にcm1～cm4となってます。 javascriptで自動更新にできないかと思い、いろいろ調べ 一定時間で繰り返すというものがあり、以下の時間の部分を変えてみました。 $(function(){ var INTERVAL = 2000; setInterval(function(){ for( $i=1; $i<5; $i++ ){ if( $i == 4 ){ $j = 1; } else{ $j = $i + 1; } if( $( "#cm" + $i ).css( "display" ) != "none" ){ $( "#cm" + $i ).hide(); $( "#cm" + $j ).show(); break; } } },INTERVAL); }); 上記の時間の部分を var INTERVAL = 604800000; に変えてみましたが、7日経っても更新されませんでした。 常にページを更新したりしているからでしょうか。原因はわかりません。 CSSは #cm1{display: block;} #cm2{display: none;} #cm3{display: none;} #cm4{display: none;} javascriptは苦手で、ネットで調べましたが見つけたのは日時を指定するものなどです。 ご教示いただけましたら幸いです。。

  • テキストやリンクの表示・非表示

    Javascriptでテキストやリンクの表示や非表示をできるようにしたいです。 基本はテキストやリンクを非表示にして、”表示”リンクを表示させ、 ”表示”リンクをクリックすると、テキストと”非表示”リンクを表示させます。 しかし下のソースで実行をすると 最初、”表示”リンクのみ表示→”表示”リンクをクリック 次、テキストと”非表示”リンクを表示→”非表示”リンクをクリック 次、全て非表示 と、なってしまい、再度表示させることができなくなってしまいます。 よい解決方法があったら教えてください。 よろしくお願いします。 ========================================================== <html> <head> <title>表示・非表示テスト２</title> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script language="javascript"> <!--// var typ; var typ2; function setDisplay(typ,typ2){ document.getElementById("myText").style.display = typ; document.getElementById("myText2").style.display = typ2; } //--> </script> </head> <body> <DIV ID="myText" style="display:none"> Display Sample<br> <a href="javascript:setDisplay('none','blcok');">非表示</a><br> </DIV> <br> <DIV ID="myText2"> <a href="javascript:setDisplay('block','none');">表示</a><br> </DIV> <br> </body> </html>

  • アコーディオンメニューをアンカーリンクで開く

    アコーディオンメニューで困っています。 色々と調べているのですが、どうもうまく動きません。 ■やりたい事 アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。 ■現状 ・アンカーリンク(A.html)-------------------- <a href="B.html#アンカー名">リンク</a> ・アコーディオン設置先(B.html)------------------ <div class="aaa" id="アンカー名"> <p class="title"> アコーディオンタイトル </p> <p class="bbb"> アコーディオンの内容表示 </p> </div> ・js--------------------------------------- $(document).ready(function(){ $(".bbb").hide(); $(".title").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); $(location.hash).next(".bbb").slideToggle("slow"); }); }); 現状はこのような状態なのですが、アンカーでの動作をしてくれません。 分かる方いらっしゃいましたら、是非教えてください

  • CSSでのブロックリンクと文字列リンクの使い分け

    ご覧頂きましてありがとうございます。 マイホームページを作っています。 テキストエディタで作成しております。 今仮にですが、 ■index.html <div class = "p"><a href = "a">あ</a></div> <div><a href = "b">い</b></div> <a href = "c">う</a> ■index.css a { color:red } とあったときに、 index.htmlの「あ」を含むブロックを赤色に、 index.htmlの「い」を含むブロックを緑色に、 index.htmlの「う」を含む文字列を青色にしたいとするとき、 index.cssのa{***}だけで装飾するわけにも行かず、 困っております。 最終的な目的はサイドのブロックをCSS表記でブロックごとリンクできるようにして、 メインの文字列だけは下線状態のままリンクできるようにしたいです。 わかりにくい表記でご面倒をおかけしますが、 分かる方に教えていただきたくお願い致します。

    • ベストアンサー
    • CSS
  • JavaScriptでCSSの変更

    JavaScriptでCSSのclassの内容を変更（例えばcolor:Greenのように）をしたいのですがどのようにすればよいでしょうか。 .message { color:Red; } <div class="message">あああああ</div> <div class="message">いいいいい</div>

  • divのクラス内のリンクの設定

    　CSSの設定でわからない点がありましたので質問させてください。 　div自体にクラスを設定しているのですが、このブロック内にリンクがあります。このdivないの<a href="">のみのCSS指定をしたいのですが、どうやってやったらよいのでしょうか？ 　これまでは、divにidを指定して、 #id a:link {… とか、アンカー自体にクラスを指定してやっていたのですが、ここではHTML自体を変更せずにCSSでコントロールしたいのです。 ソース自体はこんな風になっています。 <div class="asset-more-link"> <a href="example.html">バージョンアップ</a>の続きを読む </div> これに対して、あれこれCSSを設定したのですが一向に反応してくれません。もしわかる方がいたらおしえてください。よろしくお願いします。

    • ベストアンサー
    • CSS
  • 特定のテキストにリンク

    特定のテキストにリンク javascriptで、html内に出てくる特定のテキストに<a>をつけてリンクさせるには、どのようにすればよいでしょうか。 例えば、 <div class="contents"> <p>私は都庁に行きます。</p> <p>私は上野にも行きます。</p> </div> とあったら、 <div class="contents"> <p>私は<a href="http://www.metro.tokyo.jp/" target="_blank">都庁</a>に行きます。</p> <p>私は<a href="http://www.ueno.or.jp/">上野</a>にも行きます。</p> </div> といった感じです。 このclass（id）の中の、この単語（テキスト）といった指定ができると良いです。 よろしくお願い致します。

  • javascript リンク先の変更

    遅くに失礼致します。 Javascriptで可能かどうかは分からないのですが リンク先を変更する手段を探しています。 現在ホームページを組んでおり、jQueryのスクリプトお導入した所、 リンク先に数値が指定してありその数値を変更したいのですが 変更するとjQueryが動作しなくなり困っております。 html側のソースは <a href="a?x=344&y=-53" class="a_a"><img src="#"></a> <a href="b?x=-50&y=0" class="a_b"><img src="#"></a> 等となっており、 画像をクリックしたら一度　a?x=344&y=-53.html に移動してから自動で別ページへ誘導する事を 考えてみたのですがその様なファイルが作れるはずもなく行き先を失いました。 クリックしてリンクが　a?x=344&y=-53　なら ****.html　に誘導等といった事はjavascriptで可能なのでしょうか？ また、対策として何か方法があるようでしたらご教授頂ければ幸いです。 何卒、宜しくお願い致します。

  • javascriptで、外部テキストにてリンク変更

    javascriptにて、例えばボタンがあったとして そのボタンのリンク先を、外部テキストから指定するには どういったスクリプトを組めばいいのでしょうか？ つまりは、定期的にリンク先を更新したい部分があるのですが、 その部分を更新しやすい（初心者でも簡単にできるよう） ように、テキストへURLを貼り付け、そのテキストファイルを サーバー上へアップするだけで、html上に配置されたボタンの リンク先が変更されるという仕組みにしたいのです。 どうかよろしくお願いいたします。

  • 「アンカーテキスト」について

    HTMLチェックサイトを使用してHTMLチェックをしたところ、アンカーテキストを作成して内部リンクを張る箇所で下記のようなエラーが大量に出てきました。 <div>～</div>内に<a>を入れたところ、画面が崩れてきれいに表示されません。 ＜該当サイトの左側のメニューです。＞ ホームページを作成すること事態初めてで、SEO対策も全然分かってなく基本的な質問で申し分けありませんがご教授お願い致します。 ●HTMLチェックサイト（Another HTML-lint gateway） http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html ●エラー内容 -------------------------------------------------- <div>を145行目の<a>～</a> 内に書くことはできません。<div>～</div>内に<a>を書くことはできます。 -------------------------------------------------- ●html（変更前） -------------------------------------------------- <li><div align="left"><a href="syurui.html#okyaku1" target="_self"><div style="margin-left:10em;">Ｏ脚</div></a></div></li> -------------------------------------------------- ●css -------------------------------------------------- #sub { float: left; width: 226px; display: inline; margin-left: 37px; } #sub p { padding-top: 0.5em; padding-bottom: 0.5em; } #sub .submenu { text-align: center; padding-bottom: 10px; border-bottom: 5px solid #FF7F00; margin-bottom: 20px; border-right: 1px solid #FF7F00; border-left: 1px solid #FF7F00; } #sub .submenu a { color: #FF7F00; text-decoration: none; border-bottom: 1px dotted #FF7F00; display: block; width: 224px; } #sub .submenu a:hover { background: #f5f5f5; } --------------------------------------------------

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する