CSS를 사용하여 HTML 앵커 태그를 클릭/링크할 수 없도록 만드는 것이 가능합니까?

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는 행동 언어가 아니기 때문에 CSS로 하는 것은 그리 쉽지 않습니다. 유일한 쉬운 방법은 앵커에서 JavaScript OnClick 이벤트를 사용하고 거짓으로 반환하는 것입니다. 이것은 아마도 사용할 수 있는 가장 짧은 코드일 것입니다.

<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는 행동이 아닌 프레젠테이션에 영향을 미치도록 설계되었습니다.

자바스크립트를 사용할 수 있습니다.

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

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

HTML:

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

Javascript:

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

이것의 장점은 논리와 프레젠테이션을 깔끔하게 분리할 수 있다는 것입니다.만약 언젠가 이 링크가 다른 일을 할 것이라고 결정한다면, 당신은 마크업을 방해할 필요가 없고, 단지 JS일 뿐입니다.

답은 다음과 같습니다.

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

단순한 것처럼. Put.**javascript:void(0)**href에서, 그리고 예를 들어 효과를 봅니다.

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

CSS 없음, 이에 필요한 JS 없음

질문자는 특별히 CSS 솔루션을 요청하지만 답변에 따르면 href=' 페이지를 유지하기 위해 더 많은 줄을 추가해야 합니다.html'. 나에게 올바른 접근법은 클릭 HTML 속성을 추가하는 것이어야 합니다.여기 해결책이 있습니다.

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

이러한 방식으로 href 링크는 향후 사용을 위해 코딩으로 유지될 수 있습니다.

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

그것은 CSS로 매우 간단하게 할 수 있습니다."a"를 "p"로 변경합니다.페이지 링크를 클릭하지 않으려면 "페이지 링크"가 다른 곳으로 연결되지 않습니다.

당신이 CSS에게 이 특정한 "p"에 대해 호버 동작을 하도록 지시할 때는 다음과 같이 말합니다.

(이 예제의 경우 "p"에 "예시" ID를 지정했습니다.)

#example
{
  cursor:default;
}

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

언급URL : https://stackoverflow.com/questions/6727659/is-it-possible-to-make-an-html-anchor-tag-not-clickable-linkable-using-css