앵커 링크를 클릭 불가능 또는 비활성화하려면 어떻게 해야 합니까?

앵커 링크를 클릭 불가능 또는 비활성화하려면 어떻게 해야 합니까?

사용자가 클릭하면 비활성화하고 싶은 앵커 링크가 있습니다.또는 텍스트 주변에서 앵커 태그를 제거하되 반드시 텍스트를 보관해야 합니다.

<a href='' id='ThisLink'>some text</a>

버튼을 추가하면 쉽게 할 수 있습니다..attr("disabled", "disabled");
비활성화된 속성을 성공적으로 추가했지만 링크는 여전히 클릭 가능하지 않습니다.
텍스트에 밑줄이 그어져 있건 없건 상관없습니다.

무슨 단서라도?

잘못된 음악가를 클릭하면 "틀리다"만 추가하고 클릭할 수 없게 됩니다.
당신이 클릭하고 당신이 맞다면, 그것은 "Wesome"을 추가한 다음 모두를 비활성화해야 합니다.<a>꼬리표를 붙이기

가장 깨끗한 방법은 pointer-events:none이 있는 클래스를 클릭을 비활성화할 때 추가하는 것입니다.일반적인 라벨과 같은 기능을 합니다.

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

포인터 이벤트 CSS 스타일을 사용합니다.(제이슨 맥도널드의 제안대로)

MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events 을 참조하십시오.대부분의 브라우저에서 지원됩니다.

다음과 같은 글로벌 CSS 규칙이 있는 경우 앵커에 "disabled" 특성을 간단히 추가하면 작업이 가능합니다.

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

당신이 무엇을 요구하고 있는지 이제야 알았어요.여기 추악한 해결책이 있습니다.

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

$('a').removeAttr('href')

아니면

$('a').click(function(){ return false})

상황에 따라 다릅니다.

부트스트랩은 우리에게.disabled수업. 꼭 이용해주세요.

그렇지만.disabledclass는 'a' 태그에 이미 class 'btn'이 있을 때만 작동합니다.어떤 오래된 'a' 태그에서도 작동하지 않아요btn클래스는 스타일 함축성을 가지고 있기 때문에 일부 맥락에서는 적합하지 않을 수 있습니다.이불 속에..disabled클래스 세트pointer-events로.none, Saroj Aryal과 Vitrilo가 제안한 것과 같은 작업을 수행하도록 CSS를 만들 수 있습니다.(Les Nightingill, 이 조언에 감사드립니다.)

추가.css클래스:

.disable_a_href{
    pointer-events: none;
}

추가하기jquery:

$("#ThisLink").addClass("disable_a_href"); 

가장 좋은 방법은 기본 작업을 방지하는 것입니다.앵커 태그의 경우 기본 동작은 다음으로 리디렉션됩니다.href지정된 주소.

따라서 javascript를 따르는 것이 이 상황에서 가장 효과적입니다.

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

클릭 시 이벤트를 사용하여 클릭 동작을 사용하지 않도록 설정할 수 있습니다.

<a href='' id='ThisLink' onclick='return false'>some text</a>

아니면 그냥 다른 것을 사용할 수도 있습니다.<a>꼬리표를 매다

제거만 하면 됩니다.href앵커 태그에서 속성을 지정합니다.

Chrome, Mozila, IE에서 테스트한 Jason MacDonald의 코멘트는 저에게 효과가 있었습니다.

비활성화 효과를 표시하기 위해 회색을 추가했습니다.

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery가 앵커 목록에서 첫 번째 요소만 선택하고 있었고, 메타 문자(*)를 추가하여 ID가 있는 모든 요소를 선택 및 비활성화했습니다.#ThisLink.

$("#ThisLink*").addClass("disable_a_href"); 

jQuery Code 한 줄 쓰기

$('.hyperlink').css('pointer-events','none');

css 파일로 쓰고 싶다면

.hyperlink{
    pointer-events: none;
}

스타일시트에 다음 클래스 만들기:

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

다음과 같이 링크에 이 클래스를 동적으로 추가합니다.

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

이것은 내가 비활성화하곤 했던 방법입니다.도움이 되길 바랍니다.

$("#ThisLink").attr("href","javascript:;");

시도해 보기:

$('a').contents().unwrap();

간단히 SAS로:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

서버가 모르는 사이에 페이지를 변경할 수 있으므로 브라우저를 절대 신뢰하지 마십시오.

링크가 한 번만 작동하려면 서버 측에서 클릭을 한 번(예를 들어 쿼리 문자열로 지정된 한 번의 토큰)만 허용해야 합니다. href 속성에 있는 URL을 사용자가 복사하여 브라우저의 탐색 모음에 삽입하고 여러 번 실행할 수 있기 때문입니다.

자바스크립트 측면에서 당신이 할 수 있는 가장 안전한 것은 완전히 대체하는 것입니다.<a>다른 태그와 링크하여 내용을 보존합니다.

/** Replace element, preserving attributes and moving descendant nodes from the previous one.
 *
 * @param {HTMLElement} element Element to be replaced changing tag.
 * @param {String} new_tag New element tag.
 * @return {HTMLElement} New created element.
 */
function rename_element_tag(element, new_tag) {
    let new_block = document.createElement(new_tag);
    for (let j = 0; j < element.attributes.length; ++j)
        new_block.setAttribute(element.attributes[j].name, element.attributes[j].value);

    $(new_block).insertAfter(element);
    while (element.childNodes.length > 0)
        new_block.appendChild(element.childNodes[0]);

    $(element).remove();

    return new_block;
}

이 기능은 태그를 "수정"함으로써 전달된 요소를 대신하고, 텍스트 노드를 처리하기 위해 jQuery 대신 바닐라 자바스크립트를 통해 모든 자식 노드를 반복함으로써 속성과 내용을 보존합니다.

당신의 경우에는 당신은 건너 뛰어야 합니다.href기여하다.

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

다른 입니다. 는 은 일 입니다 과 는 과 는 입니다.return false한클릭 됩니다. 즉, 하면 가 됩니다 됩니다 가 하면 .

가장 쉬운 방법

html에서:

<a id="foo" disabled="true">xxxxx<a>

js에서:

$('#foo').attr("disabled", false);

속성으로 사용하면 완벽하게 작동합니다.

언급URL : https://stackoverflow.com/questions/7654900/how-do-you-make-an-anchor-link-non-clickable-or-disabled