programing

jQuery를 사용하여 앵커를 활성화하거나 비활성화하는 방법은 무엇입니까?

telecom 2023. 8. 18. 20:52
반응형

jQuery를 사용하여 앵커를 활성화하거나 비활성화하는 방법은 무엇입니까?

jQuery를 사용하여 앵커를 활성화하거나 비활성화하는 방법은 무엇입니까?

된 닻을 위해href다음을 사용하는 것이 좋습니다.

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

참조:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

SO에 대한 이전 질문도 참조하십시오.

jQuery 링크 비활성화

제가 현재 작업 중인 앱은 자바스크립트와 결합된 CSS 스타일로 합니다.

a.disabled { color:gray; }

그런 다음 링크를 비활성화하고 싶을 때마다 전화합니다.

$('thelink').addClass('disabled');

그런 다음 '링크' 태그의 클릭 핸들러에서 항상 먼저 확인합니다.

if ($('thelink').hasClass('disabled')) return;

나는 여기서 내가 훨씬 더 좋아하는 답을 찾았습니다.

다음과 같이 표시됩니다.

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

활성화에는 href 속성 설정이 포함됩니다.

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

이렇게 하면 앵커 요소가 일반 텍스트가 되고 그 반대의 경우도 마찬가지입니다.

$("a").click(function(){
                alert('disabled');
                return false;

}); 

더 좋은 해결책은 비활성화된 데이터 속성을 설정하고 클릭 시 확인하는 것입니다.이렇게 하면 javascript가 ajax 호출이나 일부 계산으로 끝날 때까지 일시적으로 앵커를 비활성화할 수 있습니다.비활성화하지 않으면 몇 번 빠르게 클릭할 수 있습니다. 이는 바람직하지 않습니다.

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

저는 jsfidle 예시를 만들었습니다: http://jsfiddle.net/wgZ59/76/

선택한 답변이 올바르지 않습니다.

포인터 이벤트 CSS 스타일을 사용합니다. (라샤드 아나라가 제안한 대로)

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

다음과 같은 글로벌 CSS 규칙이 있는 경우 앵커에 "비활성화" 특성을 간단히 추가하면 작업이 수행됩니다.

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

아래 라인을 사용해 보십시오.

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

하더라도 사하지않설라도더정하도용록▁co도라▁even더설하▁co정않사▁if지▁disable<a>꼬리표를 달다href을 사용하면 작하므합니다야제를 해야 합니다.href 한또.

활성화하려면 아래 행을 사용해 보십시오.

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");
$('#divID').addClass('disabledAnchor');

CSS 파일에서

.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:white;
}

이는 거짓으로 반환하는 것처럼 간단합니다.

전에

jQuery("li a:eq(0)").click(function(){
   return false;
})

또는

jQuery("#menu a").click(function(){
   return false;
})
$("a").click(function(event) {
  event.preventDefault();
});

이 메서드를 호출하면 이벤트의 기본 작업이 트리거되지 않습니다.

페이지와의 모든 상호 작용을 차단하려는 경우 jQuery Block을 확인할 수 있습니다.UI 플러그인

사용하지 않도록 설정하는 방법이나 사용하지 않도록 설정하는 이유를 지정하지 않았습니다.

먼저 JQuery의 속성 기능을 사용하여 클릭이나 문서 로드와 같은 이벤트에서 해당 기능을 수행하도록 값을 비활성화로 설정하는 방법을 알고자 합니다.

앵커 태그 내에 텍스트 또는 HTML 콘텐츠를 넣어야 하지만 해당 요소를 클릭할 때 아무런 작업도 수행하지 않을 경우(예: 현재 페이지이기 때문에 페이지 관리자 링크를 사용할 수 없는 상태로 만들려는 경우)에는 href를 잘라내기만 하면 됩니다. ;)

<a>3 (current page, I'm totally disabled!)</a>

@michael-meadows의 답변은 저에게 이것을 알려주었지만, 그의 답변은 여전히 JQuery/JS와 함께 작업해야 하는 시나리오를 다루고 있었습니다. 경우 html 작성 자체를 제어할 수 있다면 href 태그를 x-ing하는 것만으로 충분하므로 솔루션은 순수한 html입니다!

href를 유지하는 jQuery finagling이 없는 다른 솔루션은 href에 #을 입력해야 하지만 페이지가 맨 위로 이동하고 일반 오래된 사용 불가능으로 설정되기를 원합니다.또는 빈 상태로 두지만 브라우저에 따라 맨 위로 이동하는 등의 작업을 수행하며 IDE에 따르면 잘못된 HTML입니다.하지만 겉보기에는a태그는 HREF 없이 완전히 유효한 HTML입니다.

마지막으로 다음과 같이 말할 수 있습니다.좋아요, 태그를 아예 버리는 게 어때요?종종 당신은 할 수 없기 때문에,a태그는 부트스트랩의 페이지 관리자와 같이 CSS 프레임워크 또는 사용 중인 컨트롤에서 스타일링 목적으로 사용됩니다.

http://twitter.github.io/bootstrap/components.html#pagination

그래서 저는 위의 반응들을 종합해서 이것을 생각해냈습니다.

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 

앵커 태그 역할을 하기 위해 필요하지 않다면, 저는 그것을 아예 교체하고 싶습니다.예를 들어 앵커 태그가 다음과 같은 경우

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

그런 다음 jquery를 사용하여 링크 대신 텍스트를 표시해야 할 때 이 작업을 수행할 수 있습니다.

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

이렇게 하면 앵커 태그를 디브 태그로 간단히 바꿀 수 있습니다.이는 훨씬 쉽고(단 2줄) 의미적으로도 정확합니다(지금은 링크가 필요하지 않으므로 링크가 없어야 하기 때문입니다).

비활성화된 속성을 가진 요소를 비활성화하거나 활성화합니다.

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );

언급URL : https://stackoverflow.com/questions/1164635/how-to-enable-or-disable-an-anchor-using-jquery

반응형