クリックした後、色がそのままになる現象

質問

<div class="category" id="Category1" category="1">
<a href="#" onClick="JavaScript:sub('table1');return false;">カテゴリ1</a>

<div class="category2" id="table1" style="display:none;">
<a href="#">小カテゴリ1</a><br>
<a href="#">小カテゴリ2</a><br>
<a href="#">小カテゴリ3</a><br>
</div></div>
---(プログラム一部抜き出し)---
カテゴリ1をマウスでクリックすると、class="category2"を表示させるJavascript:sub();が起動して、小カテゴリ1～3を表示させようとしています。
動作上は問題なく動くのですが、選んだ「カテゴリ1」のまわりにうっすらと四角い線が入り、他の場所をクリックするまでは「カテゴリ1」にマウスが乗っているかのうような色に変わったままになっています。

四角い線が入らない or オーバーロールしたときだけ色が変化するようにするにはどうしたらいいでしょうか？

言葉が足りないかもしれませんが、お気軽に質問ください。よろしくお願いします。

回答No.1

koutarou504 · ベストアンサー

まず、カテゴリ１が何故に A 要素 (アンカー) なのか。
JavaScript が無効な場合はどうしたいのか。
その様な設計意図によって対処は異なります・・・。

意味的には、
<span onClick="JavaScript:sub('table1');return false;">カテゴリ1</span>
とする方が正しい様な気もするし、望む結果が得られるのではないかと。

とりあえず現象としては、リンク(アンカー)をクリックして、そこがアクティブな為にその様な状態になっている訳で・・・。（タブキーで遷移すると判りやすいかも・・・）

お礼

ありがとうございます。onClickの場所が違っていたわけですね。助かりました。