テキストにCSSで色を設定後、その中にリンクを置くと当然にリンクの色はリンク用の色になる。
このとき、カウンタを作っていたので、①～⑳までのカウンタに色を付けており、押したカウンタまで❶で表していた。
カウンタをクリックするとスクリプトを起動させるため<a>タグを使っていたが、上記の通りこれでは色が正しく表現できない。
そこで、こんなことをやってみたけど、クリックして文字列が入れ替わるとクリック色に戻ってしまう。
obj = document.getElementsByName("counter");
for (n=0;n<obj.length;n++) {
obj[n].style.display = s;
}
タグ：<a href="javascript:changeCounter(0,1)" name="counter" class="counter">❶</a>
そこで、タグを変更してみた。これでスクリプトはいらなくなる。
タグ：<span onClick="javascript:changeCounter(0,1)" class="counter">❶</a>
あとはCSSの設定にこれを付け加えると、リンクっぽく見える。
span.counter:hover {
cursor: pointer;
}