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로 연기되었습니다.

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;
}

폼에서 HTML / CSS 만 고수하려면 다른 옵션을 사용하십시오. 스타일을 지정하고 disabled속성을 설정하십시오 .

예 : http://jsfiddle.net/cFTxH/1/

CSS 만 사용하려면 CSS에서 비활성화 논리를 정의해야합니다.

CSS 정의에서 논리를 이동하려면 속성 선택기를 사용해야합니다. 여기 몇 가지 예가 있어요 :

정확한 href가있는 링크를 비활성화하십시오. =

다음과 같이 특정 href 값을 포함하는 링크를 비활성화하도록 선택할 수 있습니다.

<a href="//website.com/exact/path">Exact path</a>

[href="https://stackoverflow.com//website.com/exact/path"]{
  pointer-events: none;
}

경로가 포함 된 링크를 비활성화합니다 : *=

여기 /keyword/에 경로에 포함 된 모든 링크 가 비활성화됩니다

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

다음으로 시작하는 링크를 비활성화하십시오. ^=

[attribute^=value]조작 대상 특정 값으로 시작하는 속성. 웹 사이트 및 루트 경로를 버릴 수 있습니다.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

비 https 링크를 비활성화하는 데 사용할 수도 있습니다. 예를 들면 다음과 같습니다.

a:not([href^="https://"]){
  pointer-events: none;
}

다음으로 끝나는 링크를 비활성화하십시오. $=

[attribute$=value]연산자 특성 타겟팅 특정 값으로 끝난다. 파일 확장자를 버리는 것이 유용 할 수 있습니다.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

또는 다른 속성

CSS는 모든 HTML 속성을 대상으로 할 수 있습니다. 될 수 있을까 rel, target, data-custom등등 그리고 ...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

속성 선택기 결합

여러 규칙을 연결할 수 있습니다. 모든 외부 링크를 비활성화하고 웹 사이트를 가리키는 링크는 비활성화하고 싶다고 가정 해 봅시다.

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

또는 특정 웹 사이트의 pdf 파일에 대한 링크를 비활성화하십시오.

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

브라우저 지원

IE7부터 속성 선택기가 지원됩니다. :not()IE9부터 선택기.

CSS를 사용 하여이 작업을 수행 할 수있는 한 가지 방법은 줄 바꿈에 CSS div를 설정하여 사라지도록 설정하는 것입니다.

예 :

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

CSS와 같은

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

실제로 전원을 끄려면 a클릭 이벤트 또는 href을 다른 사용자가 설명한대로 교체해야 합니다.

추신 : 분명히하기 위해 나는 이것이 상당히 어수선한 해결책이라고 생각할 것입니다. SEO에는 이것이 최고가 아니지만 순수한 CSS로는 최고라고 생각합니다.

이 시도:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

포인터 이벤트 속성을 통해 제어 할 수 있습니다 방법 마우스로 HTML 요소의 응답 / 터치 이벤트 - CSS 호버 / 활성 상태, 클릭 / 자바 스크립트에서 탭 이벤트 및 커서가 표시되었는지를 포함.

그건 하지 당신이 유일한 방법 링크를 해제 하지만, 좋은 CSS의 방법 IE10 + 모든 새로운 브라우저에서 작동하는 :

.current-page {
  pointer-events: none;
  color: grey;
}

<a href="#" class="current-page">This link is disabled</a>

나는 인터넷을 통해 검색하고 이것 보다 더 나은 것을 찾지 못했습니다 . 기본적으로 버튼 클릭 기능을 비활성화하려면 jQuery를 사용하여 CSS 스타일을 추가하십시오.

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

그런 다음 다시 활성화하려면

$("#myLink").css({ 'pointer-events': '' });

Firefox와 IE 11에서 확인하면 작동합니다.

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

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}

<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

솔루션을 게시 한 모든 사람 덕분에 여러 가지 접근 방식을 결합하여 고급 disabled기능 을 제공했습니다 . 여기에 요점이 있으며 코드는 다음과 같습니다.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

coffescript 클래스는 다음과 같습니다.

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

링크를 덮도록 다른 요소의 크기를 지정할 수도 있습니다 (오른쪽 z- 인덱스 사용).

(우리는 브라우저 윈도우가 모바일 크기 일 때 H2가이를 덮게하는 "응답 성있는"디자인으로 인해 갑자기 비활성화 된 링크 문제가 있었기 때문에 우연히 발견했습니다.

여기 데모
이 하나를 시도

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

또 다른 트릭은 보이지 않는 요소를 그 위에 배치하는 것입니다. 호버 효과도 비활성화됩니다.

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}

CSS에서 할 수 있습니다

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}

<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

참조 :

있습니다 text-decoration: none;및이 color: black;필요하지 않습니다하지만 더 일반 텍스트처럼 링크 모양을 만든다.

pointer-events:none 링크를 비활성화합니다 :

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