• このエントリーをはてなブックマークに追加

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」の無効処理を行う際に是非。。。

  • このエントリーをはてなブックマークに追加

Related Posts

Trackback URL

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

Categories
Recent Entries
Popular Entries
Hatena Bookmark
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援について
  • NO FUR