iframeで2分割しているサイトで、左部がメニュー、右部がメニューのリンク先を表示する設定です。
左部のリンクをクリックし、右部にリンク先の内容が表示されている間、
メニュー側のクリックしたリンク部分の文字色を変更したままでおきたいのですが、javascriptで、できますでしょうか。
左メニュー側の他リンクをクリックしたら、新しいリンク部分の色が変化し、前にリンクした部分の色は
最初の状態に戻る、という設定を行いたいです。
CSSのvisitedだとクリックした後でしか指定できないため困っております。
よろしくお願い申し上げますm(_ _)m
No.1ベストアンサー
- 回答日時:
たとえばこんなかんじ
<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
- 回答日時:
>マウスが重なった場合背景を変化させる機能
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を使えばよかったのですね、記述ミスをしていて気がつきませんでした。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(Microsoft Office) Microsoft Edgeの「ニュースと関心事項」についてお聞きします。 3 2023/05/22 12:08
- Excel(エクセル) コントロールにリンクするセルが選択されない 3 2022/06/12 14:37
- Windows 8 動画の再生とタイトルの変更方法を教えてください。 3 2022/08/01 14:51
- gooブログ ブログの記事を書きだしのみに表示したい 1 2022/06/25 19:11
- Yahoo!メール ヤフーメールの新様式 1 2022/04/01 08:03
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- Windows 10 マイクロソフトアカウント 2 2022/08/10 13:09
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字と数字が混在する要素のsor...
-
ホームページビルダー15 メニュ...
-
プルダウンメニュー連動後の処...
-
jqueryアコーディオンのマウス...
-
JQueryで、liタグの背景に色を...
-
ツリーメニューについて
-
jqueryプルダウンメニュー個別着色
-
javascript テキストエリアを1...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
離れた場所にマウスオーバーで...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
-
1行で左寄せと右寄せと中央揃え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
javascriptでEnterキーをtabキ...
-
クリックした<a>タグのみにClas...
-
チェックボックスに入っている...
-
【javascript で動的に a タグ...
-
jquery ドロップダウンメニュー...
-
「jQuery」アコーディオンメニ...
-
jQueryで、リンクURLの一致を確...
-
jQueryのeqで最後からn番目以降...
-
ネストされたチェックボックス...
-
javascriptで、クリックしたら...
-
onmouseoverの表示切り替えが上...
-
文字と数字が混在する要素のsor...
-
jQueryでネスト構造の<li>がク...
-
タブメニューを上下に設置
-
<li></li>の数を制限
-
jQuery多層式アコーディオンメ...
-
どの<li><a> が押されたか判別...
-
CSSとJavaScriptを使ってドロッ...
-
複数の画像をランダム(シャッ...
おすすめ情報