링크 비활성화하기(CSS/javascript/jQuery)

CSS를 사용하여 링크 비활성화하기

CSS를 사용하여 링크를 비활성화하는 방법입니다.

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

pointer-events에 대한 자세한 내용은 여기를 참고해보시기 바랍니다. 이 방법을 사용하면 소스를 수정하지 않고도 원하는 요소(element)가 포함된 링크를 비활성화할 수 있습니다.

§ 이 방법을 응용하면 워드프레스 본문의 이미지의 링크가 작동하지 않도록 비활성화하여 이미지를 클릭했을 때 그림 파일이 나오는 페이지로 넘어가지 않도록 할 수 있을 것입니다.

jQuery를 사용하여 링크 비활성화하기

CSS 대신 jQuery로도 가능합니다.

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

또는

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

jQuery도 마찬가지로 소스를 수정하지 않고 원하는 요소가 포함된 링크를 비활성화할 수 있습니다. (워드프레스에서 사용하려면 함수 파일에 해당 js 파일을 enqueue시켜야 합니다.)

javascript를 사용하여 링크 비활성화하기

간단하게 javascript로 링크를 비활성화시키는 방법도 있습니다.

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

추가:

위에서 설명해듯이 CSS를 사용하여 마우스를 클릭해도 아무런 동작(이벤트)이 발생하지 않도록 하여 링크를 비활성화시킬 수 있지만, 간혹 이 방법이 안 먹힐 때가 있습니다.

이런 경우 jQuery의 unwrap() 메소드를 사용하면 원하는 대로 링크를 제거할 수 있습니다. 자세한 내용은 여기를 참고해보시기 바랍니다.

예를 들어, 이 워드프레스 블로그에서 이미지를 클릭하면 Lightbox 형태로 실행되었지만 Lightbox 플러그인을 제거하니 이미지가 별도의 창에서 열립니다. 그래서 CSS를 사용하여 링크가 이미지일 경우에 링크를 비활성화시켰지만 제대로 작동하지 않네요. CSS 대신 jQuery의 unwrap() 메소드를 사용하여 <a href...> 태그 자체를 제거하니 원하는 대로 작동하네요.

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.