- PR -

リンクの下線を消して、再度下線を表示する

参照元記事 | 同じ記事を参照しているスレッド一覧
1
投稿者投稿内容
mogumogu
常連さん
会議室デビュー日: 2006/02/24
投稿数: 32
投稿日時: 2006-03-07 12:11
お世話になります。ｊｓｐ、というかｈｔｍｌの質問です。
Windows,Java(Struts1.2)で開発してます。

--------------------------
|time |12:00|12:10|12:20|
--------------------------
|value| 120| 100| 7|
--------------------------
|value| 150| 50| 28|

こんな感じの画面があって、時間の行がそれぞれリンクになっていて、ソート
できる機能があります。
顧客から、時間のリンクをクリックされたら、クリックされたところは
リンクの下線を消してほしい、という要望が来ていて悩んでいます。
で、下記の記事を見てクリックされたリンクの下線を消すことはできたのですが、
たとえば初めに12:00のリンクをクリックし、次に12:10のリンクをクリックした後は、
12:10のリンクだけ下線が表示されないようにしないといけないんですが、
12:00のリンクも消えたままになっています。

リンクがクリックされた履歴を消すとか、リフレッシュするとか可能でしょうか？

いま、スタイルシートでAタグをこのように指定しています。
a:link {
text-decoration: underline;
color: #0000FF;
}
a:visited {
text-decoration: underline;
color: #0000FF;
}
よろしくお願いします。

mogumogu
常連さん
会議室デビュー日: 2006/02/24
投稿数: 32
投稿日時: 2006-03-07 12:15
追記です。
a.hoverで、カーソルを当てればリンクを表示できますが、
カーソルを当てなくてもリンクを表示できるようにしたいのです…＾＾；
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2006-03-07 12:24
引用:

rieさんの書き込み (2006-03-07 12:11) より:

顧客から、時間のリンクをクリックされたら、クリックされたところは
リンクの下線を消してほしい、という要望が来ていて悩んでいます。

クリックされたところというよりは「訪れたところ」でしょうね?

引用:

で、下記の記事を見てクリックされたリンクの下線を消すことはできたのですが、
たとえば初めに12:00のリンクをクリックし、次に12:10のリンクをクリックした後は、
12:10のリンクだけ下線が表示されないようにしないといけないんですが、
12:00のリンクも消えたままになっています。

そりゃ、CSS ファイル レベルでやれば全部そうなってしまうでしょうね。

style 要素に予め既定の状態を書いておいて、JavaScript で style を変更する。
というのが簡単そうです。
(CSS の visited 擬似クラスは同じ表示になるようにする必要があるかも)

他にも方法はあるかもしれません。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
ぼのぼの
ぬし
会議室デビュー日: 2004/09/16
投稿数: 544
投稿日時: 2006-03-07 12:28
javascriptを使っても良いのなら…

コード:

<html>

<head>

<style type="text/css">

a.class1:link   {text-decoration:underline;color:#0000FF;}

a.class1:visited{text-decoration:underline;color:#0000FF;}

a.class2:link   {text-decoration:none;color:#0000FF;}

a.class2:visited{text-decoration:none;color:#0000FF;}

</style>

<script language="javascript">

function func(obj) {

    if (obj.className == "class1") obj.className = "class2";

    else obj.className = "class1";

}

</script>

</head>

<body>

<a class="class1" href="javascript:void(0)" onclick="func(this)">リンク</a>

</body>

</html>

うわ、かぶったｗ
javascriptをちょっと修正。

[ メッセージ編集済み 編集者: ぼのぼの 編集日時 2006-03-07 12:35 ]
mogumogu
常連さん
会議室デビュー日: 2006/02/24
投稿数: 32
投稿日時: 2006-03-07 14:41
じゃんぬねっとさん、ぼのぼのさん、早速のご返答ありがとうございました！
ぼのぼのさんのjavascriptをそのまま実装してできました！
感謝感激です！
1

スキルアップ／キャリアアップ（JOB@IT）