クリックしても何も起こらないダミーのa要素

制作途中など、リンクを張る予定だけどURLは決まっていないという時に、ダミーのa要素を作っておきたいことがある。というわけで、クリックしても何も起こらないダミーのa要素を3パターン書いてみた。

HTML5のプレースホルダー・リンク

HTML5ではJavaScriptなどによって動的にリンク先を設定するケースを考慮し、a要素にhref属性が必須とされていないので、以下のような書き方ができる。href属性がないa要素を「プレースホルダー・リンク」と言う。ただし、ブラウザの標準スタイルでは文字色も下線もマウスポインタもデフォルトのままになるので、必要に応じて別途スタイル指定をする必要がある。

<a>リンク文字列</a>

javascirpt:void(0);を使う

<a href="javascript:void(0);">リンク文字列</a>

return false;を使う

clickイベント時にreturn falseすることでhref属性で指定したリンク先を無効にするというやり方。下の書き方だとjQuery必須だが、ピュアなJavaScriptで代替もできる。

<a href="./" class="dummy">リンク文字列</a>

$('.dummy').click(function(){
    return false;
}