ちょっと凝ったメニュー作成について

質問

ちょっと凝ったメニューをJavascriptで作ろうと思っています。

1. メニューA
2. メニューB
3. メニューC

メニューA～Cを選ぶと同じウィンドウの中の<div id="child-menu">で用意されたフィールドにそれぞれの別選択画面が出ます。

ここでメニューA～Cをマウスオーバーすると青に変わり、マウスクリックすると赤色に変わります。マウスクリックした際には上記のように別ウィンドウの選択画面が変化します。
この処理はa:hoverなどのスタイルシートでできますが、すでにメニューBをクリック済み（赤色に変化）で、再度マウスオーバーすると青色に変化してしまいます。この処理はスタイルシートを使って処理してからですが、すでに選択されたメニューに関してはマウスオーバーしても赤色のままにするにはどうしたらいいのでしょうか？

ご教授願います。説明が下手で申し訳ありません。

回答No.1

hrm_mmm · ベストアンサー

＞ここでメニューA～Cをマウスオーバーすると青に変わり、
＞マウスクリックすると赤色に変わります。

＞すでに選択されたメニューに関してはマウスオーバーしても赤色のままにするにはどうしたらいいのでしょうか？

onclick="flag_a=true;this.style.color='red'"
onmouseover="if(flag_a){this.style.color='red'}else{this.style.color='blue'}"
onmouseout="if(flag_a){this.style.color='red'}else{this.style.color='black'}"
これを各メニューのタグに記述、flag_a の変数名はメニューごとに変えておく
ブラウザによっては、flag変数を先にglobal宣言しておく必要があるかも