CSS를 사용하여 HTML 앵커 태그를 클릭하거나 링크 할 수 없도록 만들 수 있습니까?

예를 들어 내가 이것을 가지고 있다면 :

<a style="" href="page.html">page link</a>

링크를 클릭 할 수없고 page.html로 이동하지 않도록 스타일 속성에 사용할 수있는 것이 있습니까?

또는 앵커 태그에 '페이지 링크'를 단순히 래핑하지 않는 유일한 옵션입니까?

편집 : 사람들이 더 나은 조언을 제공 할 수 있도록 왜 내가 이것을하고 싶은지를 말하고 싶습니다. 개발자가 원하는 탐색 스타일 유형을 선택할 수 있도록 응용 프로그램을 설정하려고합니다.

따라서 링크 목록이 있으며 하나는 항상 현재 선택되어 있고 다른 하나는 모두 선택되어 있지 않습니다. 선택되지 않은 링크의 경우 분명히 일반적인 클릭 가능한 앵커 태그 가기를 원합니다. 그러나 선택한 링크의 경우 링크를 클릭 할 수있는 반면 링크를 클릭 할 수없는 사용자를 선호하는 사람들이 있습니다.

이제 선택한 링크 주위에 앵커 태그를 프로그래밍 방식으로 쉽게 감쌀 수 없었습니다. 그러나 선택한 링크를 항상 다음과 같이 래핑 할 수 있다면 더 우아해질 것이라고 생각합니다.

<a id="current" href="link.html">link</a>

그런 다음 개발자가 CSS를 통해 연결 스타일을 제어하도록합니다.

이 CSS를 사용할 수 있습니다 :

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

그런 다음 클래스를 HTML 코드에 할당하십시오.

<a style="" href="page.html" class="inactiveLink">page link</a>

링크를 클릭 할 수없고 커서 스타일은 링크가있는 손이 아닌 화살표입니다.

또는 HTML에서이 스타일을 사용하십시오.

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

하지만 첫 번째 방법을 제안합니다.

CSS는 행동 언어 (예 : JavaScript)가 아니기 때문에 CSS와 너무 쉽지 않습니다. 유일한 쉬운 방법은 앵커에서 JavaScript OnClick 이벤트를 사용하고 false로 반환하는 것입니다. 아마도 가장 짧은 코드 일 것입니다 당신은 그것을 위해 사용할 수 있습니다 :

<a href="page.html" onclick="return false">page link</a>

예. CSS를 사용하여 가능합니다

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

또는 이벤트가없는 순수한 HTML 및 CSS :

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

CSS는 행동이 아니라 프리젠 테이션에 영향을 주도록 설계되었습니다.

일부 JavaScript를 사용할 수 있습니다.

document.links[0].onclick = function(event) {
   event.preventDefault();
};

더 눈에 거슬리지 않는 방법 (jQuery를 사용한다고 가정) :

HTML :

<a id="my-link" href="page.html">page link</a>

자바 스크립트 :

$('#my-link').click(function(e)
{
    e.preventDefault();
});

이것의 장점은 논리와 표현이 명확하게 분리되어 있다는 것입니다. 언젠가이 링크가 다른 작업을 수행하기로 결정했다면 마크 업을 엉망으로 만들 필요없이 JS 만 있으면됩니다.

정답은:

<a href="page.html" onclick="return false">page link</a>

CSS로 수행 할 수 있으며 매우 간단합니다. "a"를 "p"로 변경하십시오. 클릭 할 수 없게하려면 "페이지 링크"가 어딘가로 연결되지 않습니다.

이 특정 "p"에 대해 호버 작업을 수행하도록 CSS에 지시하면 다음과 같이하십시오.

(이 예에서는 "p"에 "example"ID를 지정했습니다)

#example
{
  cursor:default;
}

이제 커서가 페이지 전체와 동일하게 유지됩니다.

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>