href 태그 사용 안 함

href 태그 사용 안 함

이 질문에는 이미 답변이 있습니다.

HTML 링크 비활성화 방법 (16개 답변)

닫힘23일 전에요.

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

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

비활성화되어 있으면 클릭할 수 없게 할 수 있습니까?반드시 JavaScript를 사용해야 합니까?

css의 도움을 받아 하이퍼링크를 비활성화합니다.아래를 시험해 보세요.

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

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

하이퍼링크에 대해 비활성화된 속성은 없습니다.안 안 안 되고 안 되고 안 되고 안 되고, 안 되고, 안 되고, 안 되고, 안 되고, 안 되고.<a>지를를떼떼

, 그 '나'나 '나'나 '나'를 제거할 수도 .href속성 - 아래 코멘트에 기재된 기타 UX 및 접근성 문제가 있으므로 권장하지 않습니다.

다음을 사용할 수 있습니다.

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

태그에는 다음 문자가 없습니다.disabledAtribute입니다<input>및 (표준)<select> §<textarea>

「비활성화, 링크의 「비활성화」를 삭제합니다.href속성을 지정하거나 false를 반환하는 클릭 핸들러를 추가합니다.

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 ™2: JavaScript 사용방법 javascript:void(0)프랙티스입니다.)

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

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

를 요.<a>태그를 붙여서 이것을 제거합니다.

또는 다음을 사용해 보십시오.

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

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

는, 「 Atribute」로 에뮬레이트 할 수 .<a>붙이다

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

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

하나 있어요.

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

도움이 되길 바랍니다;)

실행 시 이 코드를 사용하여 javascript를 사용하여 링크를 비활성화할 수 있습니다.

$(.page-link').cssssvs-link", "none";

포인터를 삭제하려면 커서를 사용하여 css를 사용합니다.

저 같은 경우에는

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

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

1. type="button".
2. 제거하다href=""여하하다
3. disabled따라서 커서를 변경하여 비활성화된 것으로 나타나며 흐리게 표시됩니다.

PHP에서의 예:

<?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 속성이 없는 경우 하이퍼링크의 자리 표시자일 뿐입니다.모든 브라우저에서 지원!

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

CSS를 사용하여 링크를 디세블로 할 수 있습니다.

pointer-events: none

참조: hugo를 사용

버튼과 링크를 올바르게 사용합니다.

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

• 링크를 클릭하면 다른 페이지 또는 같은 페이지의 다른 위치로 이동할 수 있습니다.

이러한 규칙을 따르면 링크를 디세블로 할 필요가 있는 시나리오는 없습니다.링크를 시각적으로 비활성화하여 빈 클릭으로 표시해도

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

접근성을 고려하지 않고 화면 리더는 링크를 링크로 읽습니다.시각장애인들은 왜 링크가 작동하지 않는지 계속 궁금해 할 것입니다.

태그를 디세블로 하는 다양한 방법을 다음에 나타냅니다.

<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.provent Default()

여기에는 이미 수많은 답변이 게시되어 있지만, 이미 언급한 접근법과 제가 찾은 접근 방식을 결합한 명확한 답변은 아직 없는 것 같습니다.이것은, 링크를 디세블로 하는 것과 동시에, 유저를 다른 페이지로 리다이렉트 하지 않게 하기 위해서입니다.

이 답변은 jquery와 부트스트랩을 사용하고 있다고 가정하고 다른 속성을 사용하여 임시로 파일을 저장합니다.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;
}

WordPress를 사용하고 있다면 코드화하는 방법을 몰라도 이 이상의 작업을 할 수 있는 플러그인을 만들었습니다.디세블로 하는 링크 셀렉터를 추가하고 드롭다운메뉴에서 [Disable all links with this selector in a new tab]를 선택하여 [update]을 클릭합니다.

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

무료 버전은 WordPress.org 플러그인 저장소에서 구할 수 있습니다.

Javascript에서 larabel 링크를 비활성화할 필요가 있는 경우, 제 해결책은 다음과 같습니다.

링크(blade.php):

<a href='/link/to/path' class='btn btn-primary mt-3' onclick='disableLink(this)'>Confirmar</a>

.css 파일

.isDisabled {
    cursor: not-allowed;
    opacity: 0.5;
}

a[aria-disabled="true"] {
    color: currentColor;
    display: inline-block; /* For IE11/ MS Edge bug */
    pointer-events: none;
    text-decoration: none;
}

.disc 파일

function disableLink(link) {
    // 1. Add isDisabled class to parent element
    link.parentElement.classList.add('isDisabled');
    // 2. Store href so we can add it later
    link.setAttribute('data-href', link.href);
    // 3. Set aria-disabled to 'true'
    link.setAttribute('aria-disabled', 'true');
}

function enableLink(link) {
    // 1. Remove 'isDisabled' class from parent span
    link.parentElement.classList.remove('isDisabled');
    // 2. Set href
    link.href = link.getAttribute('data-href');
    // 3. Remove 'aria-disabled', better than setting to false
    link.removeAttribute('aria-disabled');
}

참고 자료: https://css-tricks.com/how-to-disable-links/

href 태그에 있는 모든 항목은 브라우저 창의 왼쪽 하단에 표시됩니다.

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

대신 href를 끄고 jQuery/anything을 사용하여 마법을 실행한 후 스타일 규칙을 추가합니다(계속 링크처럼 보여야 할 경우).

a {
    cursor:pointer;
}

false를 반환함으로써 앵커태그를 디세블로 할 수 있습니다.내 경우 Jquery 아코디언에 angular 및 ng-disabled를 사용하여 섹션을 비활성화해야 합니다.

그래서 이것을 수정하기 위해 작은 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를 사용합니다.그래서 저는 다음을 할 수 있었습니다.

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

언급URL : https://stackoverflow.com/questions/13955667/disabled-href-tag