비활성화 된 href 태그

해당 링크는 비활성화되어 있지만 여전히 클릭 할 수 있습니다.

<a href="/" disabled="disabled">123n</a>

비활성화 된 경우 클릭 할 수 없도록 할 수 있습니까? 반드시 JavaScript를 사용해야합니까?

하이퍼 링크에 대해 비활성화 된 속성이 없습니다. 링크하지 않으려면 <a>태그를 완전히 제거하거나 해당 href속성을 제거해야 합니다.

css의 도움으로 하이퍼 링크를 비활성화합니다. 아래를 시도하십시오

a.disabled {
  pointer-events: none;
  cursor: default;
}

<a href="link.html" class="disabled">Link</a>

당신이 사용할 수있는:

<a href="/" onclick="return false;">123n</a>

다음 솔루션 중 하나를 사용할 수 있습니다.

HTML

<a>link</a>

자바 스크립트

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

CSS

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

이 시도:

<a href="javascript:void(0)" style="cursor: default;">123n</a>

<a>태그는 이없는 disabled단지에 대한의 속성 <input>들 (그리고 <select>s와 <textarea>들).

링크를 "비활성화"하려면 해당 href속성을 제거 하거나 false를 반환하는 클릭 핸들러를 추가 할 수 있습니다 .

이를 제거하려면 <a>태그 를 제거해야합니다 .

또는 사용해보십시오 :-

  <a href="/" onclick="return false;">123n</a>

HTML :

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

CSS :

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

팁 1 : CSS 사용 pointer-events: none;

팁 2 : JavaScript 사용 javascript:void(0) (이것은 모범 사례입니다)

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

팁 1 : Jquery 사용 $('selector').attr("disabled","disabled");

CSS 만 해당 :에서 링크를 제거합니다 href.

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

부모가 허용 pointer-events: none하면 다음 a-tag과 같이 자식이 비활성화됩니다 (div가 a를 덮고 너비 / 높이가 0이 아니 어야 함 ).

<div class="disabled">
   <a href="/"></a>
</div>

어디:

.disabled {
    pointer-events: none;
}

$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

이 코드를 사용하여 런타임에 자바 스크립트를 사용하여 링크를 비활성화 할 수 있습니다

$ ( '. page-link'). css ( "포인터 이벤트", "없음");

포인터를 제거하려면 cursor을 사용하여 CSS 로이 작업을 수행 할 수 있습니다 .

<a>태그 에서 disabled 속성을 에뮬레이션 할 수 있습니다 .

<a href="link.html" disabled="">Link</a>

a[disabled] {
   pointer-events: none;
   cursor: default;
}

내 경우에는

<a href="/" onClick={e => e.preventDefault()}>

내가 하나가:

<a href="#">This is a disabled tag.</a>

희망이 당신을 도울 것입니다;)

직접 비활성화 할 수는 없지만 다음을 수행 할 수 있습니다

1. 추가하십시오 type="button".
2. href=""속성을 제거하십시오 .
3. disabled속성을 추가 하면 강의를 변경하여 비활성화되어 흐리게 표시됩니다.

다음은 예입니다

<?php
if($status=="Approved"){ 
?>
  <a type="button" class="btn btn-primary btn-xs" disabled> EDIT
     </a>
  <?php    
}else{
?>
  <a href="index.php" class="btn btn-primary btn-xs"> EDIT
    </a>
  <?php    
}
?>

ng-href 삼항 연산을 사용하여 원하는 결과를 얻을 수있었습니다.

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

어디

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

버튼과 링크를 올바르게 사용하십시오.

• 버튼 은 웹 페이지 (대화 상자, 확장 / 축소 영역)에서 스크립트 기능 을 활성화 합니다.

• 링크를 통해 다른 페이지 또는 다른 페이지로 이동합니다.

이 규칙을 따르면 링크를 비활성화해야 할 때 시나리오가 없습니다. 링크가 시각적으로 비활성화 된 상태로 보이고 클릭시 공백으로 보이더라도

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

당신은 접근성을 고려하지 않을 것이며 스크린 리더는 그것을 링크로 읽을 것이고 시각 장애인들은 왜 링크가 작동하지 않는지 궁금해 할 것입니다.

WordPress를 사용하는 경우 아무것도 코딩하는 방법을 알 필요 없이이 작업을 수행 할 수있는 플러그인을 만들었습니다. 비활성화하려는 링크의 선택기를 추가 한 다음 "새 탭에서이 선택기와 관련된 모든 링크 비활성화"를 선택하기 만하면됩니다. 표시되는 드롭 다운 메뉴에서 업데이트를 클릭하십시오.

이것을 보여주는 GIF를 보시려면 여기를 클릭하십시오

당신은 할 수 WordPress.org 플러그인 저장소에서 무료 버전을 얻을 그것을 밖으로 시도 할 수 있습니다.

태그를 비활성화하는 다양한 방법은 다음과 같습니다.

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

앵커 태그에 대해 비활성화 된 속성이 없으므로 jQuery 함수 내에서 앵커 태그 동작을 중지하려면 함수 시작시 아래 행을 사용할 수 있습니다.

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault ()

나는 여기에 이미 많은 답변이 게시되어 있지만 이미 언급 한 접근법을 내가 찾은 것으로 결합한 명확한 방법은 없다고 생각합니다. 이는 링크를 모두 비활성화 된 상태로 표시하고 사용자를 다른 페이지로 리디렉션하지 않도록하기위한 것입니다.

이 답변은 jquery 및 bootstrap을 사용한다고 가정 href하고 비활성화 된 동안 다른 속성을 사용하여 속성을 임시로 저장합니다 .

//situation where link enable/disable should be toggled
function toggle_links(enable) {
    if (enable) {
        $('.toggle-link')
        .removeClass('disabled')
        .prop('href', $(this).attr('data-href'))
    }
    else {
        $('.toggle-link')
        .addClass('disabled')
        .prop('data-href', $(this).prop('href'))
        .prop('href','#')
    }

a.disabled {
  cursor: default;
}

href 태그의 모든 것은 마우스로 브라우저 창의 왼쪽 아래에 표시됩니다.

개인적으로 사용자에게 javascript : void (0) 과 같은 것을 표시하는 것은 끔찍 하다고 생각 합니다.

대신 href를 끄고 jQuery / 다른 것을 사용하여 마술을하고 스타일 규칙을 추가하십시오 (여전히 링크처럼 보일 필요가있는 경우).

a {
    cursor:pointer;
}

가장 좋은 대답은 항상 가장 간단합니다. 코딩이 필요 없습니다.

(a) 앵커 태그에 href 속성이 없으면 하이퍼 링크의 자리 표시 자일뿐입니다. 모든 브라우저에서 지원합니다!

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

false를 반환하여 앵커 태그를 비활성화 할 수 있습니다. 제 경우에는 Jquery 아코디언에 각도 및 ng 비활성화를 사용하고 섹션을 비활성화해야합니다.

그래서이 문제를 해결하기 위해 작은 js 스 니펫을 만들었습니다.

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>

링크를 일시적으로 비활성화하고 나중에 href를 활성화하기 위해 href를 남겨 두는 경우 (모든 브라우저에서 첫 번째 href를 사용한다는 것을 알았습니다. 따라서 나는 할 수 있었다 :

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

나에게 맞는 변형 :

<script>
  function locker(){
    if ($("a").hasClass("locked")) {
         $("a").removeClass('locked').addClass('unlocked');
         $("a").attr("onClick","return false");
    } else {
         $("a").css("onclick","true");
         $("a").removeClass('unlocked').addClass('locked');
         $("a").attr("onClick","");
    }
  }
</script>

<button onclick="locker()">unlock</button>

<a href="http://some.site.com" class="locked">
  <div> 
      .... 
  <div>
</a>

<a href="/" disabled="true" onclick="return false">123</a>

그냥 추가 : 이것은 일반적으로 작동하지만 사용자가 브라우저에서 자바 스크립트를 비활성화하면 작동하지 않습니다.

1) 부트 스트랩 3 플러그인을 통합 한 후 선택적으로 앵커 태그에서 Bootstrap 3 클래스를 사용하여 href 태그를 비활성화 할 수 있습니다

<a href="/" class="btn btn-primary disabled">123n</a>

또는

2) 브라우저에서 html 또는 js를 사용하여 자바 스크립트를 활성화하는 방법을 배웁니다. 또는 웹 사이트를 사용하기 전에 자바 스크립트를 사용하도록 팝업 알리기