name属性の背景に色をつける

質問

<a href="××.html#test">リンク</a>
と言うリンクがあるとします。これをクリックした時に、アンカーにname属性を指定していると、
<a name="#test">yahoo!の詳細</a>
name属性があるところまでジャンプします。

この、<a href="××.html#test">リンク</a>をクリックした時に、name属性がついた「yahoo!」リンクの背景に色をつける又は印みたいなものをつける方法はないでしょうか？

前どこかでサンプルなのを見たんですが、検索しても引っかからなかったので質問させてもらいました。どうぞよろしくお願いします。

回答No.2

yambejp · ベストアンサー

現在<a name="test">test</a>の構文は非推奨となっています。
idで指定するのが正しいので覚えておいて損はないでしょう。
<a id="test">test</a>もしくは互換性を考慮して
<a id="test" name="test">test</a>

で、あとはこんな感じでやるとよいでしょう。
<script>
window.onload=function(){
var h=location.hash.substring(1);
if(h) changeColor(h);
}
function changeColor(id){
obj=document.getElementById(id)
obj.style.backgroundColor="#ff0000";
}
</script>
<a href="#test" onClick="changeColor(this.href.substring(this.href.indexOf('#')+1))">to test</a>
<a id="test">test</a>

回答No.3

oka5130

No.1です。

すみません、別ページを考慮していませんでした。
No.2の回答者の方が書いてくださったスクリプトを両方のページに書いておけば大丈夫です。

<a name="test">test</a>の構文が非推奨であることは私も知りませんでした。
是非、idを指定する方法をお使い下さい。

回答No.1

oka5130

onclick イベントハンドラと、JavaScript の getElementsByName 関数を
使ってやれば実現できます。

<script type="text/javascript"><!--
function highlight( name ) {
// name属性から要素を取得
var el = document.getElementsByName( name )[0];
// スタイルを指定
el.style.backgroundColor = "#FF0000";
}
//--></script>
<a href="#test" onclick="highlight('test');">testへジャンプ</a>
...
<a name="test">ここはtestです。</a>

ただし、name属性の値は重複が許されるため、上のコードでは
<a name="test"> の前に別の要素に test という名前を付けてしまって
いるとそちらの要素の背景色が変わってしまいます。

なので、特定の要素のスタイルを変更したい場合などは、id要素を
指定する方が良いかと思います。

<script type="text/javascript"><!--
function highlight( id ) {
// id属性から要素を取得
var el = document.getElementById( id );
// スタイルを指定
el.style.backgroundColor = "#FF0000";
}
//--></script>
<a href="#test" onclick="highlight('test');">testへジャンプ</a>
...
<a name="test" id="test">ここはtestです。</a>

補足

サンプルプログラムありがとうございます。

これは、同一ページ内でしか適用できないのでしょうか？実際、サンプルプログラムを実行すると、同一ページ内でしかできませんでした。