以前に紹介させていただいたCSSの pointer-eventsで<a>タグのリンクを無効化する方法にも関連しますが、今回はJavascriptによる<a>タグリンクの無効化を行う方法のまとめです。
jQueryでaタグのリンクを無効
<a>タグ全部、もしくはa class=”disabled”のような特定のリンクに対して、jQueryでクリックを無効化するという方法です。|
1 2 3 4 5 6 7 8 |
<script src="./jquery.min.js"></script> <script> $(function(){ $('a.disabled').click(function(){ return false; }) }); </script> |
jQueryでclass=”disabled”のリンクを無効化します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> ul.nav li { border:1px solid #ddd; } ul.nav li a { text-decoration:none; display:block; padding:10px; } ul.nav li a:hover { color:#fff; background:#dd0000; } </style> <ul class="nav"> <li><a class="disabled">リスト1</a></li> <li><a class="disabled">リスト2</a></li> <li><a class="disabled">リスト3</a></li> <li><a class="disabled">リスト4</a></li> </ul> |
サンプルはこちらです。
jQueryでaタグリンクの無効化デモ
javascript:void(0)でリンクを無効
<a href=> に javascript:void(0) を指定する際の注意点 の記事でも紹介させていただいた通り、javascript:void(0)でリンクを無効化できます。|
1 |
<a href="javascript:void(0)" onclick="javascript 関数(); return false;">リンク</a> |
こちらはa href=””のリンクを無効にして、onClick属性に書かれたスクリプトを実行する場合に利用することが多いと思います。
※IE6にも対応する場合はreturn false;も付けておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> ul.nav li { border:1px solid #ddd; } ul.nav li a { text-decoration:none; display:block; padding:10px; } ul.nav li a:hover { color:#fff; background:#dd0000; } </style> <ul class="nav"> <li><a href="javascript:void(0)" onClick="return false;">リスト1</a></li> <li><a href="javascript:void(0)" onClick="return false;">リスト2</a></li> <li><a href="javascript:void(0)" onClick="return false;">リスト3</a></li> <li><a href="javascript:void(0)" onClick="return false;">リスト4</a></li> </ul> |
コメント