- ベストアンサー
アンカータグをクリックして色を変える方法（リンク数変動ある場合）
はじめまして。 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様 早速のご回答ありがとうございました。 記述を試してみましたが、色は変更されませんでした！？ 正常にリンクはしました。 スクリプトエラーも発生しませんでした。 大変恐縮ですが、再度ご教授いただけると助かります。
関連するQ&A
- Struts html:linkのアンカータグ
Struts html:linkを次のようにコードを作成していました。 <html:link href="index.jsp" paramId="jump_to" paramName="param" anchor="idss">中略</html:link> idssというのは、int idss にて変数です。当該ページに移動してリンクを実行すると、 http://localhost:8080/blog/index.jsp?jump_to=20#idssとなりidssの部分をintの値として実行したいにもかかわらず、idssの文字列として認識されてしまいます。 尚、anchorの部分をanchor="20"として、実行しますと正常に動作いたしました。 <A Name～の部分は間違いがないようです。anchor=idssとして、動作しようとすると、引用符が必要ですとエラーが出てしまいます。 idssを使用して、希望する動作を得るためには、どうすればよいのでしょうか。idssを使用しないとすれば、どうすればよいのでしょうか。 皆様のご意見、ご教授をお待ちしております。 宜しくお願い申しあげます
- 締切済み
- Java
- リンククリック数に応じて出現するリンク
よろしくお願いします。 題名からではちょっと分かりずらいので、もうちょっと詳しく説明したいと思います。 あるページ(html)にA,B,Cといったリンクがあったとします。 そこで、A,B,Cのリンククリック数の合計がある数以上になったら、あらたにDというリンクを出現させることがしたいんです。 ”出現”ということはちょっと無理っぽいので、あらかじめDというリンクを作っておき、そしてA～Cのリンククリック数の合計がある数に達したら、Dのリンクに入ることができるというような、CGIはありますでしょうか？ リンクを沢山押して閲覧してくれると、見ることができる秘密部屋やみたいのを作りたいと思います。 私なりに、いろいろと探してみたのですが見つかりませんでした。 リンクカウンターのCGIとキリ番CGIを組み合わせればできるかなー、と思っているのですが、私には知識がないのでどこをさわっていいのかわかりません。 リンクカウンターCGIでリンクのクリック数をカウントして、あらかじめ設定しておいたクリック数以上になると、キリ番CGIの機能で特別のページへ行けるように（または表示）、すればいいのじゃないかな、って素人の考えですがどうでしょうか？ JavaScriptはスクリプトを見られてしまえば、すぐにパスワードが分かってしまうので、 分かる人がみれば簡単に次ぎのページに行けてしまいます。 だからCGIを使ってできればいいなと思ったのですが。 どなたか御存知の方はよろしくお願い致します。
- 締切済み
- CGI
- クリック数によってリンク可能になるCGI
よろしくお願いします。 題名からではちょっと分かりずらいので、もうちょっと詳しく説明したいと思います。 あるページ(html)にA,B,Cといったリンクがあったとします。 そこで、A,B,Cのリンククリック数の合計がある数以上になったら、あらたにDというリンクを出現させることがしたいんです。 ”出現”ということはちょっと無理っぽいので、あらかじめDというリンクを作っておき、そしてA～Cのリンククリック数の合計がある数に達したら、Dのリンクに入ることができるというような、CGIはありますでしょうか？ リンクを沢山押して閲覧してくれると、見ることができる秘密部屋やみたいのを作りたいと思います。 私なりに、いろいろと探してみたのですが見つかりませんでした。 リンクカウンターのCGIとキリ番CGIを組み合わせればできるかなー、と思っているのですが、私には知識がないのでどこをさわっていいのかわかりません。 リンクカウンターCGIでリンクのクリック数をカウントして、あらかじめ設定しておいたクリック数以上になると、キリ番CGIの機能で特別のページへ行けるように（または表示）、すればいいのじゃないかな、って素人の考えですがどうでしょうか？ JavaScriptはスクリプトを見られてしまえば、すぐにパスワードが分かってしまうので、 分かる人がみれば簡単に次ぎのページに行けてしまいます。 だからCGIを使ってできればいいなと思ったのですが。 どなたか御存知の方はよろしくお願い致します。
- 締切済み
- その他（インターネット・Webサービス）
- テキストアンカーリンクで複数URLにリンクする方法
テキストアンカーリンクを利用して、ワンクリックで複数のURLを_blankで開くには？ タグの記述で可能でしょうか？ 可能なようでしたらご教授下さい。 また、scriptで公開されているようなものがございましたら、お教えいただけますでしょうか。 宜しくお願いいたします。
- ベストアンサー
- HTML
- IE を開いてページ内のリンクをクリックする VB スクリプト
IE を開いて、ページ内のリンク (アンカー) をクリックして、リンク先のページを開くまでの VB スクリプトの書き方を教えてください。
- 締切済み
- Visual Basic
- ブラウザのリンクのクリックを自動化したい
ブラウザのリンクのクリックを自動化したい ブラウザ上での特定のリンクのクリックを自動化したいのですが、どのような方法があるか教えてください。 インターネット上のあるサイトで、複数のリンク（アンカー）が列挙されるページがあったとします。 そのリンクの中の、特定の文字列パターンを持ったリンク文字のみを自動クリックしたいのです。 リンク文字は常に同じ長さというわけではないので、マウス位置も可変しますので、マウスマクロ等では対応できません。 リンクは５分ごとに新たなリンクが次々と出てきますので、それぞれクリックは一回のみ、 リロードも５分おきに自動でできればさらにありがたいのですが、 これらを実現するのに必要なのはjavascriptでしょうか？ まず実現するための方法選びがわからずに困っています。 どうかお願いします。
- ベストアンサー
- ブラウザ
- 直リンクされた場合のフレーム表示を崩したくない→どうやってループを避けるか？？
過去に何回か同じような質問内容がありましたので拝見しまして自分でも色々と試してみたのですが、 <script language="JavaScript"><!-- myHome="http://www.provider.jp/yourHP/index.html"; if (document.referrer != myHome){ // リンク元がトップページじゃない location.href = myHome; // トップページへジャンプ } // --></script> という記述で解決出来ました。 が、しかし、今度はindex.htmlから入り、上の記述をしたページへのリンクをクリックすると、フレーム内にまたindex.htmlがループしてしまうのです(ToT)これはどうやって防げば良いのでしょうか？？あるいは、上の記述では防げないのでしょうか？？お手数ですが回答よろしくお願い致します！
- ベストアンサー
- JavaScript
- 「戻る」リンクをページ内につくる方法
ページ内に「戻る」リンクを設置したいのですが、 ＃ブラウザの「戻る」ボタンと同じ動作 Javascript(history.back)を使わずに実現する方法はありますか？
- 締切済み
- CGI
- FLASH内リンクにURLを与える方法
http://katamari.co.jp/ ↑このサイトで実現している、flash内部でリンクをクリックすると、ブラウザのURLも書き換えられ、そのURLにアクセスするとflash内の当該ページにリンクするというのをやりたいのですが、これはどうやっているのでしょうか？
- ベストアンサー
- Flash
- 検索エンジンにリンクをたどらせない方法
リンクをクリックすると別のページへ移動させたいのですがクローラ等にたどらせない方法を考えています、アンカーリンクにnofollow指定は万全ではなく、javascriptのリンクも検地されるらしいですが他にいい方法はないでしょうか？ajaxを使ってソース上に表示させなければ大丈夫でしょうか？ いい方法があればアドバイスをお願いします。
- 締切済み
- HTML
お礼
お返事遅れてスミマセン、 うまくできそうです、ありがとうございました。