jQueryを使ってWebページ上で何かアクションを実装する際、
リンク＜a＞タグをクリックすることでエフェクトを実行させることはよくあること。
その際、別ページへ遷移するわけでも、ページ内リンクを使うわけでもない場合に
リンク＜a＞タグの属性「href」の飛び先の指定に困ることがあることも。
結局「href=”#”」でごまかしたり、「href=”javascript:void(0);”」としたり。
その様な場合に使えそうな、
クリックされたリンク＜a＞タグの「href」を無効にする方法があったのでメモ書き程度に紹介してみます。
サンプルでは、リンク用の＜a＞タグの「href」属性が
以下の様な「href=”#”」の場合とします。
◆HTML <a href="#">アクション実行用リンク</a>
このソースの場合の、リンクテキストをクリック後に
「href」属性を無効にするスクリプトは以下の様になります。
◆SCRIPT【SAMPLE01】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a[href=#]').click(function(){
return false;
})
});
</script>
単純に「href=”#”」がクリックされたら
その処理を無効にさせるもの。
他の記述方法としては、
◆SCRIPT【SAMPLE02】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a[href=#]').click(function(e){
e.preventDefault();
})
});
</script>
この記述方法でも同様の処理を加えられます。
「href=”#”」の記述自体が文法的にあまりよろしくないので
なにか無効にさせるIDを「href=”#cancel”」などと決めておいて
jQuery側の対象を「$(‘a[href=#cancel]’)」としておく感じでもいいかもしれません。
あまり必要な場面は無いかもしれませんが
リンクタグの「href」の無効処理を行う際に是非。。。