앵커 태그가 아무것도 참조하지 않게하는 방법?

jQuery를 사용하는데 일부 앵커 태그가 동작하지 않도록해야합니다.

나는 보통 다음과 같이 쓴다 :

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

그러나 이것은 페이지의 상단을 나타냅니다!

아무 것도 가리 키지 않게하려면 <a>(앵커) 태그를 사용하지 않아야합니다 .

링크처럼 보이지만 링크처럼 작동하지 않으려면 적절한 요소 (예 <span>:)를 사용하고 CSS를 사용하여 스타일을 지정하는 것이 가장 좋습니다 .

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

또한이 질문에 "jQuery"라는 태그를 지정하면 클릭 이벤트 처리기를 첨부한다고 가정합니다. 그렇다면 위와 동일한 작업을 수행하고 다음 JavaScript와 같은 것을 사용하십시오.

$('#fake-link-1').click(function() {
    /* put your code here */
});

완벽한 솔루션이 아닌 몇 가지가 있습니다.

1. 가짜 앵커에 연결

<a href="#">

문제점 : 링크를 클릭하면 페이지 맨 위로 이동

2. 'a'이외의 태그 사용

스팬 태그를 사용하고 jquery를 사용하여 클릭을 처리하십시오.

문제 : 키보드 탐색이 중단되고 호버 커서를 수동으로 변경해야합니다.

3. 자바 스크립트 void 함수에 링크

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

문제 : IE에서 이미지를 연결할 때 중단

해결책

이것들은 모두 문제가 있기 때문에 내가 해결 한 해결책은 가짜 앵커에 연결 한 다음 onClick 메소드에서 false를 반환하는 것입니다.

<a href="#" onClick="return false;">

가장 간결한 솔루션은 아니지만 위의 방법으로 모든 문제를 해결합니다.

아무것도하지 않게하려면 다음을 사용하십시오.

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

이를 처리하는 올바른 방법은 링크를 처리 할 때 jQuery로 링크를 "중단"하는 것입니다.

HTML

<a href="#" id="theLink">My Link</a>

JS

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

마지막 두 번의 호출은 브라우저가 클릭을 해석하지 못하게합니다.

그것을 좋아하는 많은 방법이 있습니다

추가 및 href속성 안 함

<a name="here"> Test <a>

href 대신 onclick 이벤트를 추가 할 수 있습니다

<a name="here" onclick="YourFunction()"> Test <a>

또는 가장 좋은 방법 인 void 함수를 추가 할 수 있습니다

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

아무 의미가 없나요?

<a href='about:blank'>blank page</a>

또는

<a href='whatever' onclick='return false;'>won't navigate</a>

시도해 볼 수있을 것 같아

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

내가 여기서 볼 수있는 유일한 것은 자바 스크립트를 실행할 때 높은 수준의 브라우저 보안이 프롬프트 될 수 있다는 것입니다.

이보다 쉬운 방법 중 하나이지만

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

이것은 드물게 사용해야합니다

몇 가지 포인터에 대한이 기사를 읽으십시오 https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

이 답변은 새로운 웹 표준 (HTML5)을 반영하도록 업데이트되어야합니다.

이:

<a tabindex="0">This represents a placeholder hyperlink</a>

... 유효한 HTML5입니다. tabindex 속성은 일반 하이퍼 링크처럼 키보드를 포커스 할 수있게합니다. span앞에서 언급 한대로이 요소를 사용할 수도 있지만 a요소를보다 우아하게 사용하는 것을 알 수 있습니다.

참조 : https://w3c.github.io/html-reference/a.html
및 https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

<a>태그의 href태그 속성이 아무것도 참조하지 않는 세 가지 방법은 다음과 같습니다 .

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

<a href="javascript:;">link</a >

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

나는 이것이 오래된 질문이라는 것을 알고 있지만 어쨌든 내 2 센트를 추가 할 것이라고 생각했습니다.

링크가 수행 할 작업에 따라 다르지만 일반적으로 상자 팝업에 대해 약간의 정보를 표시하는 경우와 같이 동일한 것을 표시 / 수행 할 수있는 URL에서 링크를 가리키고 있습니다.

<a id="about" href="/about">About</a>

그런 다음 jQuery로

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

이런 식으로 아주 오래된 브라우저 (또는 JavaScript가 비활성화 된 브라우저)는 여전히 별도의 정보 페이지로 이동할 수 있지만, 더 중요한 것은 Google이이를 선택하여 정보 페이지의 내용을 크롤링하는 것입니다.

중지하려는 모든 링크 href="#!"(또는 실제로 원하는 것)가 있는지 확인한 후 다음을 사용하십시오.

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});

속성 a없이 HTML 앵커 ( 태그)를 가질 수 있습니다 href. href속성을 제외하면 아무것도 링크되지 않습니다.

<a>link</a>

나를 위해 일한 유일한 것은 위의 조합이었습니다.

먼저 ul의 li

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

그런 다음 LoadTab2_1에서 탭 div를 수동으로 전환했습니다.

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

연결이 끊어지면 탭의 작업이 분리되기 때문입니다.

기본 탭이 변경 될 때 탭 스타일을 수동으로 수행해야합니다.

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");

당신은 그것을 할 수 있습니다

<a style='cursor:pointer' >Link</a>

<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

이것은 내 앵커 태그였습니다. onClick = ""이벤트에서 false를 반환하면 여기서 유용하지 않습니다. 방금 href = "#"속성을 제거했으며 아래와 같이 나를 위해 일했습니다.

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

이 CSS를 추가해야했습니다.

.SomeClass
{
    cursor: pointer;
}

WordPress 사이트에서이 문제가 발생했습니다. 드롭 다운 메뉴의 헤더에는 항상 속성이 href=""있으며 헤더 플러그인에는 표준 URL 만 사용할 수 있습니다. 가장 쉬운 해결책은 바닥 글 에서이 코드를 실행하는 것입니다.

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

이렇게하면 빈 앵커가 아무것도하지 못하게됩니다.

React는 더 이상 href="javascript:void(0)"앵커 태그에서 이와 같은 기능을 지원하지 않지만 다음은 꽤 잘 작동하는 것입니다.

<a href="#" onClick={() => null} >link</a>

나는 이것이 jQuery 질문으로 태그되어 있다는 것을 알고 있지만 AngularJS로도 대답 할 수 있습니다.

요소에 ng-click 지시문을 추가하고 $ event 변수 인 click 이벤트를 사용하십시오. 기본 동작을 방지하십시오.

<a href="#" ng-click="$event.preventDefault()">

$ event 변수를 함수에 전달할 수도 있습니다.

<a href="#" ng-click="doSomething($event)">

이 기능에서는 클릭 이벤트로 원하는 것을 수행 할 수 있습니다.