[JS]Javascript で a 要素のリンクを無効にする方法のまとめ｜Javascript・jQuery｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]Javascript で a 要素のリンクを無効にする方法のまとめ

スポンサード

以前に紹介させていただいた CSSの pointer-events で <a> タグのリンクを無効化する方法にも関連しますが、今回は Javascript による<a> タグリンクの無効化を行う方法のまとめです。

どちらも

jQuery で a タグのリンクを無効

<a> タグ全部、もしくは a class="disabled" のような特定のリンクに対して、jQuery でクリックを無効化するという方法です。

<script src="./jquery.min.js"></script>
<script>
$(function(){
    $('a.disabled').click(function(){
		return false;
    })
});
</script>

$(function(){

$('a.disabled').click(function(){

return false;

})

});

</script>

jQuery で、class="disabled" のリンクを無効化します。

<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>

<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>

サンプルはこちら
jQuery で a タグリンクの無効化デモ

javascript:void(0) でリンクを無効

<a href=> に javascript:void(0) を指定する際の注意点の記事でも紹介させていただいた通り、javascript:void(0) でリンクを無効化できます。

<a href="javascript:void(0)" onclick="javascript 関数(); return false;">リンク</a>

1	<a href="javascript:void(0)" onclick="javascript 関数(); return false;">リンク</a>

こちらはa href="" のリンクを無効にして、onClick 属性に書かれたスクリプトを実行する場合に利用することが多いと思います。
※IE6 にも対応する場合は return false; も付けておきます。

<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>