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

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

---

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

<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> -그게 제가 보통 사용하는 것입니다

---

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

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

element {
    cursor: pointer;
    cursor: hand;
}

---

아무도 언급하지 않은 한 가지 방법은 href가 빈 로컬 파일 위치를 가리 키도록하는 것입니다.

<a href='\\'>my dead link</a>

왜? react 또는 angular와 같은 프레임 워크를 사용하는 경우 컴파일러는 로그 또는 콘솔을 더럽힐 수있는 경고를 내 보냅니다. 이 기술은 또한 로봇이나 거미가 사물을 잘못 연결하는 것을 방지합니다.

---

DONT USE <a>... 대신 사용 <span class='style-like-link'>하고 원하는 스타일로 클래스를 사용하십시오.

---

일반적으로 표현식 평가와 javascript:void(0);href 추가를 포함하는 undefined 반환을 포함하는 javascript void를 사용하여이를 달성 할 수 있습니다 .

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

a {
  text-decoration: initial;
}

<a href="javascript:void(0);"> This link actually does nothing when clicked</a>

참고URL : https://stackoverflow.com/questions/8260546/make-a-html-link-that-does-nothing-literally-nothing