« MGS3 | メイン | システムエンジニアの平均年収 »

JavaScriptを実行するリンクのCSS

#コメント欄での指摘を受けて少々補足します。2008.3.11 23:20
最近jQueryを使ってプログラムを書くことが多いのですが、
$('selector').click(func)で、DOMクリック時の関数を書いていく場合、DOMがaタグじゃなくても良いのですね(当たり前ですが)。
で、ユーザに「クリックできるところだよ」という意味でリンクっぽく表示しておきたいのだけど、aタグにしたくはない、というときに使っている方法です。

#補足ここまで

リンクでJavaScriptを実行するとき、

<a href="javascript:hoge();void(0);">実行</a>

と書いたり、

<a href="#" onclick="hoge();">実行</a>

と書いたりすることが多いですが、前者はウィンドウのステータスバーにJavaScriptの関数が見えてかっこわるいし、後者はアンカーに飛んじゃうので、スクロールがあるページだと画面上部に戻ってしまうことがあります。

で、最近よく使うのは、

<span class="jslink">実行</span>

として、CSSで

.jslink{
    cursor:pointer;
    color:blue;
    text-decoration:underline;
}

と指定する方法。これで見た目やマウスポインタの挙動はaタグと同じで、先に書いた問題はクリアします。

#その昔、はてぶのほってんとりで見たないようだけど、ページがどこか忘れてしまったのでメモ。

コメント (2)

Anonymous:

class="jslink"で onclick時のHoge関数はどこいってまったんだい?

あ!
超重要なこと書くの忘れてた!

最近はjQuery使って書くことが多くて、jQueryの、
$('selector').click(function(){})
で、click時の関数を定義してるんですね。だから、別にaタグじゃなくても良いわけです。