클릭 할 때 페이지가 "점프"하지 않도록 빈 HTML 앵커를 어떻게 만들 수 있습니까?

StackOverflow https://stackoverflow.com/questions/493175

  •  20-08-2019
  •  | 
  •  

문제

링크를 클릭 할 때 일부 jQuery를 사용하여 콘텐츠를 숨기거나 표시합니다. 나는 다음과 같은 것을 만들 수 있습니다.

<a href="#" onclick="jquery_stuff" />

그러나 페이지에서 아래로 스크롤하는 동안 해당 링크를 클릭하면 페이지 상단으로 다시 올라갑니다.

내가 같은 일을한다면 :

<a href="" onclick="jquery_stuff" />

페이지가 다시로드되어 JavaScript가 작성한 모든 변경 사항의 페이지를 제거합니다.

이 같은:

<a onclick="jquery_stuff" />

원하는 효과를 줄 것이지만 더 이상 링크로 표시되지 않습니다. 빈 앵커를 지정하여 JavaScript 핸들러를 onclick 이벤트, 페이지에서 아무것도 변경하거나 스크롤 바를 움직이지 않고 이벤트?

도움이 되었습니까?

해결책

"반환 거짓"을 넣으십시오. 두 번째 옵션에서 :

<a href="" onclick="jquery_stuff; return false;" />

다른 팁

당신은 필요합니다 return false; 후 jquery_stuff:

<a href="no-javascript.html" onclick="jquery_stuff(); return false;" />

이것은 기본 조치를 취소합니다.

다음과 같이 간단히 넣을 수 있습니다.

<a href="javascript:;" onclick="jquery_stuff">

jQuery는이 호출에 대한 기능이 있습니다 preventDefault 여기에서 찾을 수 있습니다.http://api.jquery.com/event.preventdefault/

예제는 다음과 같습니다.

<script>
$("a").click(function(event) {
    event.preventDefault();
});
</script>

다음과 같은 링크를 빌드 할 수도 있습니다.

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

Eyelidlessness '주석을 확인하십시오 (앵커가 아닌 버튼 사용). 동일한 조언을 게시하려고했습니다. 리소스에 링크하지 않고 스크립트를 실행하는 앵커는 버튼으로 구현해야합니다.

이벤트 핸들러를 HTML에 넣지 말고 앵커 의미 목적으로 사용하지 않는 앵커 태그 사용을 중단하십시오. 버튼을 사용하고 JavaScript에 클릭 핸들러를 추가하십시오. 예 : HTML <button id="jquery_stuff">Label</button> 및 JavaScript $('#jquery_stuff').click(jquery_stuff);. CSS를 사용하여 패딩, 테두리, 마진 및 배경색을 제거한 다음 링크 스타일 (예 : 색상 및 텍스트 결정)을 추가하여 링크처럼 보이도록 버튼을 스타일링 할 수 있습니다. - 눈 없음 10 월 19 '10 at 17:40

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

href HTML의 유효성 검사기에서 오류를 팝업하지 않으려면 거기에 무언가가 필요합니다. 그만큼 javascript:; 좋은 장소 보유자입니다.

당신이 정말로 사용하고 싶다면 #:

<a href="#me" name="me" onclick="jquery">link</a>

조심하십시오 return false;, 그것은 당신이하고있는 일의 기본 동작을 중단합니다.

또한 JS가 제출과 같으면 Internet Explorer에서 문제가 발생할 수 있습니다.

<a href="javascript:// some helpful comment " onclick="jquery_stuff" />

나는 보통 a를 사용합니다 <span> 그리고 이와 같은 것을 달성해야 할 때 링크처럼 보이도록 스타일링하십시오.

  <a href="#" class="falseLinks">Link1</a>
  <a href="#" class="falseLinks">Link2</a>

등..

jQuery :

  $(function() {
    $("a.falseLinks").click(function() {
      // ...other stuff you want to do when links is clicked

      // This is the same as putting onclick="return false;" in HTML
     return false;
    })
  });

@eyelidlessness는 그가 말한 방식에 약간 어리석은 것이었지만 그는 옳았습니다. 이것은 가장 깨끗한 방법입니다. jQuery가 더 쉽고 깨끗한 물건을 위해 바닐라 JavaScript로 돌아갈 경우 jQuery를 사용하는 이유는 무엇입니까?

보통 나는 :

<a style="cursor:pointer;" onclick="whatever();">Whatever</a>

이건 어때:

<a href="#nogo" onclick="foo();">some text</a>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top