[html] 아무것도하지 않는 HTML 링크 만들기 (말 그대로 아무것도하지 않음)

Program / 글쓴이

아무것도하지 않는 링크를 원합니다. 나는 이것을 원하지 않는다 :

<a href="#">

URL은 something.com/whatever/#.

내가 링크를 원하는 유일한 이유는 사용자가 텍스트를 클릭 할 수 있다는 것을 알 수 있기 때문입니다. 자바 스크립트는 어떤 작업을 수행하는 데 사용되기 때문에 링크가 아무데도 갈 필요는 없지만 링크처럼 보이려면 링크가 필요합니다!

일부 데이터 속성을 사용하고 CSS에이 속성이있는 경우 요소가 링크처럼 보이도록 할 수 있지만 약간 지나친 것처럼 보입니다.

답변

다음은 href가 실행되지 않도록합니다.

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

jQuery를 사용하는 경우 event.preventDefault()사용할 수 있습니다.

답변

이 시도:

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

답변

HTML5에서 이것은 매우 간단합니다. href속성을 생략하십시오 .

<a>Do Nothing</a>

스 니펫 확장

에서 는 A 태그의 HREF 속성에 MDN :

href

이것은 하이퍼 텍스트 소스 링크를 정의하는 앵커에 대한 단일 필수 속성 이었지만 HTML5에서는 더 이상 필요하지 않습니다.

마우스 오버시 손 모양 커서는 어떻습니까?

브라우저의 기본 스타일은가 a없는 태그의 경우 커서를 포인터로 변경하지 않을 수 있습니다 href. 다음 CSS를 사용하여 보편적으로 변경할 수 있습니다.

a {
    cursor: pointer;
}
<a>Do Nothing</a>

스 니펫 확장

그러나 더 선택적으로 이벤트 처리기를 추가하려는 요소에만 적용하는 것이 좋습니다.

탭 중심으로 만드는 것은 어떻습니까?

tabindex="0"요소에 추가 하기 만하면 됩니다.

<a tabindex="0">Do Nothing</a>

스 니펫 확장

a링크없이 태그 를 사용하는 것이 합리적 입니까?

일반적으로 아니요, button대신 요소 를 사용하고 CSS로 스타일을 지정하는 것이 좋습니다. 그러나 사용하는 것이 무엇이든간에 div의미 론적이지 않으므로 가능 하면 임의의 요소를 사용하지 마십시오 .

답변

링크로 만들지 말고 (선호하는 것이 좋지만) CSS로 스타일을 지정하여 링크처럼 보이게합니다.

p.not-a-link { text-decoration: underline; cursor: pointer }

또는 링크로 만들고 링크 e.preventDefault()를 방지하는 데 사용되는 자바 스크립트 기능을 사용하는 것이 더 좋습니다 .

또한 hrefJS가 활성화되지 않은 사용자가 여전히 사용할 수 있도록 링크를에 추가하십시오 (대체로).

답변

<a href="javascript:;">Link text</a> -그게 제가 보통 사용하는 것입니다

답변

우리는 일반적으로 표현식 평가와 정의되지 않은 반환을 포함하는 javascript void를 사용하여이를 달성 할 수 있습니다. javascript:void(0); href .

void 연산자는 일반적으로 “void (0)”( “void 0″과 동일)를 사용하여 정의되지 않은 기본 값을 얻는 데만 사용됩니다. 이 경우 전역 변수 undefined를 대신 사용할 수 있습니다 (기본값이 아닌 값에 할당되지 않았다고 가정).

a {
  text-decoration: initial;
}
<a href="javascript:void(0);"> This link actually does nothing when clicked</a>

스 니펫 확장

답변

@Curt의 대답은 작동하지만 CSS에서 커서 스타일 을 하여 가짜 링크를 생성하지 않고도 링크처럼 보이게 만들 수 있습니다. 브라우저 적합성에 따라 손이나 포인터를 사용하십시오.

크로스 브라우저 준수 포인터 CSS ( 커서 스타일 가이드에서) :

element {
    cursor: pointer;
    cursor: hand;
}