リンクをクリックした際、一時的にそのリンクの色を変化させる方法

質問

iframeで２分割しているサイトで、左部がメニュー、右部がメニューのリンク先を表示する設定です。

左部のリンクをクリックし、右部にリンク先の内容が表示されている間、
メニュー側のクリックしたリンク部分の文字色を変更したままでおきたいのですが、javascriptで、できますでしょうか。
左メニュー側の他リンクをクリックしたら、新しいリンク部分の色が変化し、前にリンクした部分の色は
最初の状態に戻る、という設定を行いたいです。

CSSのvisitedだとクリックした後でしか指定できないため困っております。
よろしくお願い申し上げますm(_ _)m

回答No.1

yambejp · ベストアンサー

たとえばこんなかんじ

<script>
window.onload=function(){
setColor();
}
function setColor(){
var menu=document.getElementById("menu");
var tags=menu.getElementsByTagName("a");
for (var i=0;i<tags.length;i++){
tags[i].onclick=function(){
var pp=this.parentNode.parentNode;
var tags=pp.getElementsByTagName("a");
for (var i=0;i<tags.length;i++){
tags[i].className="";
}
this.className="hoge";
}
}
}
</script>
<style>
#menu a{
color:#0000ff;
text-decoration:none;
}
#menu .hoge{
color:#ff0000;
background-Color:#ffff00;
font-weight:bold;
}
</style>

<ul id="menu">
<li><a href="#">hoge1</a></li>
<li><a href="#">hoge2</a></li>
<li><a href="#">hoge3</a></li>
</ul>

お礼

ありがとうございます、動かすことができました。

よろしければもうひとつ質問なのですが、こちらにマウスが重なった場合背景を変化させる機能を入れるにはどうしたらよいのでしょうか？

function swImg(iName,str)
{
document.images[iName].src = str;
}

では画像のみをそのまま変えるため、うまくいかなかったもので…。
申し訳ございませんが、よろしくお願いします。

回答No.2

yambejp

>マウスが重なった場合背景を変化させる機能

hoverを使うといいです。背景画像を変更するのでよろしいですね？

#menu a{
color:#0000ff;
text-decoration:none;
}
#menu a:hover{
background-Image:url(1.jpg)
}
#menu .hoge{
color:#ff0000;
background-Image:url(2.jpg)
font-weight:bold;
}

みたいな感じでどうでしょうか？
hover＝オンマウスのときのcssでは1.jpgを背景に
クリックしたhogeクラスの際には2.jpgにしています

お礼

たびたびありがとうございました。
こちらは通常のcssを使えばよかったのですね、記述ミスをしていて気がつきませんでした。

ありがとうございます。