リンクを無効にする(CSS / javascript / jQuery)

Last Updated: 2020 年 11 月 15 日 댓글

CSSを使用してリンクを無効にする

CSSを使用してリンクを無効にする方法です。

요소명 {
pointer-events: none;
cursor: default;
}

pointer-events詳細については、 ここを参考にしてみてください。 この方法を使用すると、ソースを修正しなくても目的の要素(element)が含まれているリンクを無効にすることができます。

§この方法を応用すれば WordPress 本文の画像のリンクが機能しないように無効にして、画像をクリックしたときに、画像ファイルが出てくるページに移らないようにすることができます。

jQueryを使用してリンクを無効にする

CSSの代わりjQueryも可能です。

$("#요소명").css({ 'pointer-events': 'none' });

또는

$('#요소명').click(function(e) { e.preventDefault(); });

jQueryも同様にソースを変更せずに必要な要素が含まれているリンクを無効にすることができます。 (WordPressで使用するには、関数ファイルに対応jsファイルを エンキュー必要があります。)

javascriptを使用してリンクを無効にする

簡単にjavascriptへのリンクを無効にする方法もあります。

<a href="javascript:void(0)">링크</a>

追加:

上記の説明にCSSを使用して、マウスをクリックしても何も動作(イベント)が発生しないようにして、リンクを無効にすることができますが、場合によっては、この方法がない受け入れられる時があります。

このような場合jQueryの unwrap() メソッドを使用すると、必要に応じてリンクを削除することができます。 詳細については、 ここを参考にしてみてください。

たとえば、この WordPress ブログで画像をクリックすると、Lightbox形で実行されたLightboxプラグインを削除したら、画像が別のウィンドウで開きます。 だからCSSを使用して、リンクが画像の場合に、リンクを無効にさせたが正常に動作していないですね。 CSSの代わりjQueryの unwrap() メソッドを使用して  タグ自体を削除したら、必要に応じ動作ですね。


コメントを残す

コメント