JavaScript에서 href 링크를 비활성화하려면 어떻게합니까?

태그가 <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>있고 어떤 조건에서는이 태그를 완전히 비활성화하고 싶습니다.

주석의 코드 (링크가 생성되는 방법)

if (n_index != n_pages) 
    a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>'; 
else 
    a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>'; 
a = a+'</ul></div>';

사용자가 클릭시 리디렉션하는 것을 원하지 않을 때 시도하십시오.

<a href="javascript: void(0)">I am a useless link</a>

이 스타일 클래스를 사용하여 페이지의 모든 링크를 비활성화 할 수 있습니다.

a {
    pointer-events:none;
}

이제 당연히 요령은 필요할 때만 링크를 비활성화하는 것입니다.

다음과 같이 빈 A 클래스를 사용하십시오.

a {}

그런 다음 링크를 비활성화하려면 다음을 수행하십시오.

    GetStyleClass('a').pointerEvents = "none"

    function GetStyleClass(className)
    {
       for (var i=0; i< document.styleSheets.length; i++) {
          var styleSheet = document.styleSheets[i]

          var rules = styleSheet.cssRules || styleSheet.rules

          for (var j=0; j<rules.length; j++) {
             var rule = rules[j]

             if (rule.selectorText === className) {
                return(rule.style)
             }
          }
       }

       return 0
    }

참고 : CSS 규칙 이름은 일부 브라우저에서 소문자로 변환되며이 코드는 대소 문자를 구분하므로 소문자 클래스 이름을 사용하는 것이 좋습니다.

링크를 다시 활성화하려면 :

GetStyleClass('a').pointerEvents = ""

브라우저 호환성에 대한 정보는 http://caniuse.com/pointer-events 페이지를 확인하십시오 .

나는 이것이 최선의 방법이라고 생각하지만 슬프게도 IE는 항상 그렇듯이 허용하지 않을 것입니다 :) 어쨌든 유용 할 수있는 정보가 포함되어 있고 일부 프로젝트는 알고있는 브라우저를 사용하기 때문에 나는 이것을 게시하고 있습니다. , 모바일 장치에서 웹보기를 사용할 때와 같습니다.

하나의 링크를 비활성화하고 싶다면 (그게 질문이라는 것을 깨달았습니다), 해당 조건에 따라 현재 페이지의 URL을 수동으로 설정하거나 설정하지 않는 기능을 사용합니다. (당신이 수락 한 해결책처럼)

이 질문은 내가 생각했던 것보다 훨씬 쉬웠습니다. :)

간단히 빈 해시를 줄 수 있습니다.

anchor.href = "#";

또는 "사용 안함"으로 충분하지 않은 경우 이벤트 핸들러를 사용하십시오.

anchor.href = "javascript:void(0)";

jQuery를 사용하여 시도하십시오.

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

anchor.href = null;

(function ($) {
    $( window ).load(function() {
        $('.navbar a').unbind('click');
        $('.navbar a').click(function () {
            //DO SOMETHING
            return false;
        });
    });
})(jQuery);

이 방법을 구현하기가 더 쉽습니다. 그리고 그것은 당신이 js라는 이점이 있습니다. HTML 내부가 아니라 다른 파일에 있습니다. 바인딩 해제없이 그렇게 생각합니다. 두 이벤트 모두 여전히 활성 상태입니다. 확실하지 않다. 하지만 어떤면에서는이 이벤트 하나만 필요합니다.

MDN element.removeAttribute(attrName);은 비활성화 할 때 속성을 null (또는 다른 값)로 설정하는 것보다 권장 합니다. 이 경우에는element.removeAttribute("href");

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute

링크를 비활성화하는 가장 쉬운 방법은 단순히 링크를 표시하지 않는 것입니다. 조건이 충족되었는지 테스트하여 이전 단추를 숨기고 싶을 때마다이 함수를 실행하십시오 (조건으로 대체 if (true)).

var testHideNav = function() {
    var aTags = document.getElementsByTagName('a'),
        atl = aTags.length,
        i;

    for (i = 0; i < atl; i++) {
        if (aTags[i].innerText == "Previous") {
            if (true) { // your condition to disable previous
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        } else if (aTags[i].innerText == "Next") {
            if (false) { // your condition to disable next
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        }
    }
};

그런 다음 testHideNav()상태가 변경되었는지 확인해야 할 때마다 실행 하십시오.

대신 span 및 javascript onclick을 사용하십시오. 일부 브라우저는 링크와 "#"href가 있으면 "점프"합니다.

이것도 가능합니다.

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

링크가 아무데도 가지 않으면 함수가 실행됩니다.

비슷한 요구가 있었지만 내 동기는 링크가 두 번 클릭되는 것을 방지하는 것이 었습니다. jQuery를 사용하여 수행했습니다.

$(document).ready(function() {
    $("#myLink").on('click', doSubmit);
});

var doSubmit = function() {
    $("#myLink").off('click');
    // do things here
};

HTML은 다음과 같습니다.

<a href='javascript: void(0);' id="myLink">click here</a>

따라서 위의 솔루션은 링크가 작동하지 않도록하지만 링크가 더 이상 유효하지 않다는 것을 표시 (AFAICT)하지 마십시오. 일련의 페이지가 있고 현재 페이지를 가리키는 링크를 비활성화 (비활성화되어 있음을 분명히 표시)하려는 상황이 있습니다.

그래서:

window.onload = function() {
    var topics = document.getElementsByClassName("topics");
    for (var i = topics.length-1; i > -1; i-- ) {
        for (var j = topics[i].childNodes.length-1; j > -1; j--) {
             if (topics[i].childNodes[j].nodeType == 1) {
                if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) {
                    topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML;
                }
            }
        }
    }
}

링크 목록을 살펴보고 현재 페이지를 가리키는 링크를 찾은 다음 (n_root3는 로컬 일 수 있지만 document비슷한 것이 있어야 한다고 생각 합니다) 링크를 링크 텍스트 콘텐츠로 바꿉니다.

HTH

다들 감사 해요...

내 문제는 아래 코드로 해결되었습니다.

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

이 jquery 용 플러그인을 설치하고 사용하십시오.

http://plugins.jquery.com/project/jqueryenabledisable

페이지의 거의 모든 필드를 비활성화 / 활성화 할 수 있습니다.

어떤 조건에서 페이지를 열려면 자바 스크립트 함수를 작성하고 href에서 호출하십시오. 조건이 충족되면 페이지를 열지 않으면 아무 작업도 수행하지 않습니다.

코드는 다음과 같습니다.

<a href="javascript: openPage()" >Click here</a>

and function:
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
}

링크를 div에 넣고 Style 속성의 표시 속성을 none으로 설정할 수도 있습니다. 이것은 div를 숨길 것입니다. 예를 들어,

<div id="divid" style="display:none">
<a href="Hiding Link" />
</div>

링크가 숨겨집니다. 버튼이나 이미지를 사용하여 onclick에서이 함수를 다음과 같이 호출하여이 div를 표시합니다.

<a href="Visible Link" onclick="showDiv()">

and write the js code as:

function showDiv(){
document.getElememtById("divid").style.display="block";
}

html 태그에 id 태그를 넣을 수도 있습니다.

<a id="myATag" href="whatever"></a>

그리고 사용하여 자바 스크립트 에서이 ID를 얻으십시오.

document.getElementById("myATag").value="#"; 

이 중 하나는 확실히 작동해야합니다 하하

링크를 비활성화하는 또 다른 방법

element.removeAttribute('href');

href가없는 앵커 태그는 비활성화 / 일반 텍스트로 반응합니다.

<a> w/o href </a>

대신에 <a href="#"> with href </a>

jsFiddel 참조

이것이 무겁기를 바랍니다.

void 대신 다음을 사용할 수도 있습니다.

<a href="javascript:;">this link is disabled</a> 

0) 링크와 "#"href가 있으면 일부 브라우저가 "점프"한다는 사실을 기억하십시오. 따라서 가장 좋은 방법은 사용자 정의 JavaScript입니다.

1) 사용자 정의 JavaScript를 사용 하는 경우 다음 과 같습니다.

<a href="#" onclick="DoSomething(); return false;">Link</a>

"return false"는 링크가 실제로 추적되는 것을 방지합니다.

2) 다음을 사용하지 않는 것이 좋습니다.

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

또는

  <a href="javascript:;" onclick="DoSomething();">Link</a>

자바 스크립트 의사 프로토콜이 일부 브라우저에서 페이지를 대기 상태로 만들 수 있기 때문에 예기치 않은 결과가 발생할 수 있습니다. IE6는 그것으로 유명합니다. 그러나 IE6에 신경 쓰지 않고 모든 것을 테스트하고 있다면 좋은 해결책이 될 수 있습니다.

3) 이미 가지고 jQuery있고 bootstrap프로젝트에 있다면 다음 과 같이 사용할 수 있습니다.

$('.one-click').on("click", function (e) {
   $( this ).addClass('disabled');
});

.disabled클래스가 부트 스트랩을 형성하는 곳 .

Qupte 양식 부트 스트랩 사이트 ( 여기 )

링크 기능 경고

.disabled 클래스는 pointer-events: nones의 링크 기능을 비활성화하는 데 사용하지만 해당 CSS 속성은 아직 표준화되지 않았습니다. 또한 포인터 이벤트를 지원하는 브라우저에서도 : 없음, 키보드 탐색은 영향을받지 않습니다. 즉, 시력이있는 키보드 사용자와 보조 기술 사용자는 이러한 링크를 계속 활성화 할 수 있습니다. 따라서 안전 tabindex="-1"을 위해 이러한 링크에 속성을 추가하여 (키보드 포커스를받지 custom JavaScript못하도록) 해당 기능을 비활성화 하는 데 사용하십시오.

그리고이 custom JavaScript섹션에 도시 된 1

비활성화 된 링크에 대한 아래 코드 :

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

또 다른 매우 간단한 해결책은 다음과 같습니다.

<a href="#">test disabled link</a>

첫 번째 솔루션은 효율적입니다.