<a href=”#” onclick=”…”>を使わないダミーリンクの記述方法

HP制作の過程で<a href=”#”>リンク</a>といったダミーリンクを作る場面があると思います。

私は以前、クリックでページを開くのではなく音声を出す仕組みを作ったことがあります。その時、<a href=”#” onclick=”…”>リンク</a>という記述にすると、クリックした後にページが上部に遷移してしまう問題が起こりました。

コーディング中の画面と自然光

調べてみたところ、ダミーリンクを入れる場合は次のやり方が推奨されるようです。

ダミーリンクの記述方法

javascript:void(0)を使います。

<a href="javascript:void(0)" onclick="…">リンク</a>

もしくは

<a href="javascript:(onclickの内容)">リンク</a>

という記述ができます。
あるいは、spanを使って

<span style="cursor: pointer" onclick="…">リンク</span>

という方法もあります。

参考サイト:Re:href=”#” onclick の悪習

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント