- ベストアンサー
アンカータグをクリックして色を変える方法（リンク数変動ある場合）
はじめまして。 javascriptを使って、別ページにあるアンカータグにリンクしたときに、テキスト等の色を変える方法でご教授いただきたいことがあります。 同じ当該掲示板にて投稿されていた記述を参考にすると、 http://oshiete1.goo.ne.jp/qa382742.html アンカー数（リンク数）をあらかじめ決めておく必要があるのですが、 これを”アンカー数”に関係なく実行する記述がわからず、 投稿させていただきました。 複数のhtmlページにこれを実現したいのですが、 htmlページによりアンカー数が様々であり、 htmlページ数も１００くらいあって、ひとつずつアンカー数を数えて設定するより一つのjava scriptファイルで実現できないでしょうか。 ご教授宜しくお願い申し上げます。
- tps0401
- お礼率37% (3/8)
- JavaScript
- 回答数6
- ありがとう数3
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
文法がどうのこうのとか、どうでもよいと思っているかもしれないけど インライン要素をいきなり<body>の下に置くのってどうよ？！ みたいな「突っ込み」です。
その他の回答 (5)
- babu_baboo
- ベストアンサー率51% (268/525)
アンカータグの指定先は、<a name="xxx">だけじゃなくて idでも出来たりするんだぁ～！ 上下の人は、スルーしてるようだけど・・・。 なので、未検証ですが、 <td id="xxxx">にすると、楽しいかも。 指導はね、見て突っ込みしたい人に向けてです。^^; classNameは、class="red under abc def" みたいに複数指定できるんだぁ～ 面倒なのでスルーしてたりするけど、それにもちょっと対応してみた。 その部分が、突っ込みしてくれるとありがたいと願っての、「突っ込み」のお願いだったのだ。 ばぶぅ～。
- yambejp
- ベストアンサー率51% (3827/7415)
＞別ページにあるアンカータグにリンクしたときに、テキスト等の色を変える方法 普通にcssのvisitedを設定するだけのような気がしますがどうなんでしょ？ 一応強制的にクラスをつけてみる方法をかいてみました <script> try{ document.addEventListener ('click',function(e){clickfunc(e)},true); }catch(e){ document.attachEvent('onclick',function(e){clickfunc(e)}); } function clickfunc(e){ var t = (e.srcElement || e.target); if(t.nodeName=="A"){ location.href=t.href; t.className="red"; e.preventDefault(); } } </script> <style> a{color:blue;} a.red{color:red;} :target{ background-Color:yellow;} </style> <a href="#a1">テスト1へ</a> <a href="#a2">テスト2へ</a> <a href="#a3">テスト3へ</a> <a href="#a4">テスト4へ</a> <a href="#a5">テスト5へ</a> <div><a name="a1" id="a1">テスト1</a></div> <div><a name="a2" id="a2">テスト2</a></div> <div><a name="a3" id="a3">テスト3</a></div> <div><a name="a4" id="a4">テスト4</a></div> <div><a name="a5" id="a5">テスト5</a></div>
補足
早速のご回答ありがとうございました。 通常に閲覧する状態だと不可視にしたい と思っております。 リンク元からリンクのみ限定で効果を 与えるような仕組みが可能であればと投稿させていただきました。
- babu_baboo
- ベストアンサー率51% (268/525)
//つづき function setStyleByHash( hash, cssStyle ) { hash = hash.substring(1); var d = document; var e = d.getElementById( hash ) || ( d.getElementsByName( hash ) || [ ])[0]; if( this.memory && this.cssStyle ) { ClassList.remove( this.memory, this.cssStyle ); this.memory = this.cssStyle = null; } if( e ) { ClassList.add( e, cssStyle ); this.memory = e; this.cssStyle = cssStyle; } } function anchorCheck( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; var href; if( 'A' !== e.nodeName ) return; href = e.getAttribute( 'href' /*@, 2@*/ ); href && setStyleByHash( href, Destination ); } //___________ var ClassList = TokenList( 'className' ); var Destination = 'destination'; /*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'load', function ( ) { setStyleByHash( location.hash, Destination); }, false ); document./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', anchorCheck, false ); </script> </body> </html> 勉強のために書いてみました。 OKWaveからだと、文字数の制限で分割しています。 つっこみどころが満載だと思います。ご指導お願いします
補足
babu_baboo様 早速のご回答ありがとうございます。 ご指導するほどのレベルではありませんので、 ただ感謝するのみで大変恐縮です。 色の変更は問題なくできました。 アンカータグにテキストを入力しないと 色の変更ができませんが、 テキストが入らなくても色の変更は可能でしょうか。 例： <p><a name="a">テスト</a></p> ↑テキストが入っていると色が変更されますが、 例えば、 <td><a name="a"></a></td> のように、テキストが入っていない場合でも色 の変更をしたいと思っております。 大変恐縮ですが、再度ご教授宜しくお願い申し上げます。
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <style type="text/css"> p { margin-bottom: 200px; } .destination { background-color:#f00; color:#ff0; } </style> <body> <p><a href="#a" name="d">abc</a></p> <p><a href="#b" name="a">def</a></p> <p><a href="#c" name="b">ghi</a></p> <p><a href="#d" name="c">jkl</a></p> <script type="text/javascript"> //@cc_on var TokenList = (function ( cut, has ) { return function ( type ) { return { 'add': function ( e, name ) { var keys = cut( name ); var buf = [ ], cnt = 0, key; while( key = keys[ cnt++ ] ) has( e[ type ], key ) || buf.push( key ); e[ type ] += ( e[ type ] ? '\u0020': '' ) + buf.join( '\u0020' ); return e[ type ]; }, 'remove': function ( e, name ) { var keys = cut( e[ type ] ); var buf = [ ], cnt = 0, key; while( key = keys[ cnt++ ] ) has( name, key ) || buf.push( key ); return e[ type ] = buf.join( '\u0020' ); } }; }; })( function ( s ) { return ( '' + s).split( /\u0020+/ ) }, function ( s, n ) { return -1 < ( '\u0020' + s + '\u0020' ).indexOf( '\u0020' + n + '\u0020' ) } ); //つづく
- みずの（@mizuno3）
- ベストアンサー率73% (192/263)
こんなのはどうでしょう？ <HTML> <HEAD> <TITLE></TITLE> <script type="text/javascript"> var c_color = "#00FFFF"; var aObject = {}; function unsetColor(){ for (var k in aObject) { aObject[k].style.background='transparent'; } } function setColor(d) { unsetColor(); d.toString().match(/#(.*)/); if (aObject[RegExp.$1]) { aObject[RegExp.$1].style.background=c_color; } } window.onload = function() { var obj = document.getElementsByTagName("a"); for (var k in obj) { if(obj[k].name && obj[k].style) { aObject[obj[k].name] = obj[k]; } if(obj[k].href && obj[k].href.match(/#/)) { obj[k].onclick = function(){ setColor(this); } } } setColor(document.location); } </script> </HEAD> <BODY> <A href="#a1">テストへ</A> <A href="#a2">テスト２へ</A> <BR> <A name="a1" id="a1">テスト</A> <BR> <A name="a2" id="a2">テスト２</A> </BODY> </HTML>
補足
mizuno様 早速のご回答ありがとうございました。 記述を試してみましたが、色は変更されませんでした！？ 正常にリンクはしました。 スクリプトエラーも発生しませんでした。 大変恐縮ですが、再度ご教授いただけると助かります。
お礼
お返事遅れてスミマセン、 うまくできそうです、ありがとうございました。