CSS 만 사용하여 링크를 비활성화하는 방법은 무엇입니까? 호출 current-page하고이 클래스와의 링크를

CSS를 사용하여 링크를 비활성화하는 방법이 있습니까?

나는 클래스를 호출 current-page하고이 클래스와의 링크를 비활성화하여 클릭 할 때 아무런 작업도 수행하지 않기를 원합니다.

답변

대답은 이미 질문의 의견에 있습니다. 가시성을 높이기 위해이 솔루션을 여기에 복사 하고 있습니다.

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" class="not-active">Link</a>

스 니펫 확장

브라우저 지원에 대해서는 https://caniuse.com/#feat=pointer-events 를 참조 하십시오 . IE를 지원해야하는 경우 해결 방법이 있습니다. 이 답변을 참조하십시오 .

경고 : pointer-eventsSVG가 아닌 요소에 CSS를 사용하는 것은 실험적입니다. 이 기능은 CSS3 UI 초안 사양의 일부 였지만 많은 공개 된 문제로 인해 CSS4로 연기되었습니다.

답변

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
<a href="#" class="disabled">link</a>

스 니펫 확장

답변

CSS는 스타일을 변경하는 데만 사용할 수 있습니다. 순수한 CSS로 할 수있는 최선의 방법은 링크를 모두 숨기는 것입니다.

정말로 필요한 것은 자바 스크립트입니다. jQuery 라이브러리를 사용하여 원하는 작업을 수행하는 방법은 다음과 같습니다.

$('a.current-page').click(function() { return false; });

답변

CSS는 그렇게 할 수 없습니다. CSS는 프리젠 테이션 전용입니다. 옵션은 다음과 같습니다.

  • 태그에 href속성을 포함하지 마십시오 <a>.
  • JavaScript를 사용하여 해당 앵커 요소를 찾은 다음 class그 href또는 onclick속성을 적절하게 제거하십시오 . jQuery가 도움이 될 것입니다 (NickF는 비슷하지만 더 나은 것을하는 방법을 보여주었습니다).

답변

부트 스트랩 비활성화 링크

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

부트 스트랩 비활성화 버튼이지만 링크처럼 보입니다.

<button type="button" class="btn btn-link">Link</button>

답변

당신은 href속성을 설정할 수 있습니다javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>

스 니펫 확장

답변

나는 사용했다 :

.current-page a:hover {
pointer-events: none !important;
}

그리고 충분하지 않았다. 일부 브라우저에서는 여전히 링크가 표시되어 깜박입니다.

나는 추가해야했다 :

.current-page a {
cursor: text !important;
}