programing tip

클릭 할 때 페이지가 "점프"되지 않도록 빈 HTML 앵커를 만들려면 어떻게해야합니까?

itbloger 2020. 11. 30. 07:53
반응형

클릭 할 때 페이지가 "점프"되지 않도록 빈 HTML 앵커를 만들려면 어떻게해야합니까?


링크를 클릭 할 때 일부 콘텐츠를 숨기거나 표시하기 위해 일부 JQuery를 작업 중입니다. 다음과 같이 만들 수 있습니다.

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

그러나 페이지에서 아래로 스크롤하는 동안 해당 링크를 클릭하면 페이지 맨 위로 다시 이동합니다.

다음과 같이하면 :

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

페이지가 새로 고침되어 자바 스크립트가 변경 한 모든 페이지가 삭제됩니다.

이 같은:

<a onclick="jquery_stuff" />

원하는 효과를 주지만 더 이상 링크로 표시되지 않습니다. onclick페이지의 내용을 변경하거나 스크롤 막대를 이동하지 않고 이벤트에 자바 스크립트 핸들러를 할당 할 수 있도록 빈 앵커를 지정하는 방법이 있습니까?


"return false"를 넣으십시오. 두 번째 옵션 :

<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에는 http://api.jquery.com/event.preventDefault/preventDefault 에서 찾을 수있는 이 호출 위해 내장 된 함수가 있습니다.

다음은 그들의 예입니다.

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

다음과 같이 링크를 만들 수도 있습니다.

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

눈꺼풀이없는 댓글 확인 (앵커가 아닌 버튼 사용) 같은 조언을 게시하려고했습니다. 리소스에 연결되지 않고 스크립트 만 실행하는 앵커는 버튼으로 구현되어야합니다.

이벤트 핸들러를 HTML에 넣는 것을 중지하고 앵커 시맨틱 목적을 제공하지 않는 앵커 태그 사용을 중지하십시오. 버튼을 사용하고 자바 스크립트에 클릭 핸들러를 추가합니다. 예 : HTML <button id="jquery_stuff">Label</button>및 JavaScript $('#jquery_stuff').click(jquery_stuff);. CSS를 사용하여 패딩, 테두리, 여백 및 배경색을 제거한 다음 링크 스타일 (예 : 색상 및 텍스트 장식)을 추가하여 링크처럼 보이도록 버튼 스타일을 지정할 수 있습니다. – 눈꺼풀 없음 10 월 19 일 10 월 19 일 17:40


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

hrefhtml에 대한 유효성 검사기에서 오류를 표시하지 않으려면 거기에 무언가가 필요합니다. javascript:;좋은 자리 표시 자입니다.

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

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

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

또한 js가 제출과 같은 경우 Internet Explorer에서 문제가 발생할 수 있습니다.


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

나는 일반적으로 <span>이와 같은 작업을 수행해야 할 때 링크처럼 보이도록 a 및 스타일을 사용합니다 .


  <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가 더 쉽고 깔끔한 작업을 위해 바닐라 자바 ​​스크립트로 돌아가려면 왜 jQuery를 사용합니까?


보통 나는 :

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

이건 어때:

<a href="#nogo" onclick="foo();">some text</a>

참고 URL : https://stackoverflow.com/questions/493175/how-can-i-create-an-empty-html-anchor-so-the-page-doesnt-jump-up-when-i-click

반응형