'#' 링크를 클릭했을 때 페이지 맨 위로 이동하지 않도록 하려면 어떻게 해야 합니까?

'#' 링크를 클릭했을 때 페이지 맨 위로 이동하지 않도록 하려면 어떻게 해야 합니까?

현재 사용하고 있습니다.<a>하는 태그.j쿼리합니다.

:<a href="#" class="someclass">Text</a>

하지만 나는 '#'이 페이지를 페이지 위로 점프시키는 것이 싫다.제가 대신 뭘 할 수 있을까요?

그래서 이건 오래된 건데...혹시나 수색에서 이걸 발견했을 때를 대비해서요

쓰세요."#/""#"페이지가 안 뛰어요.

jQuery에서 클릭이벤트를 처리할 때 false를 반환하여 링크의 응답을 정지하고 기본액션(즉,href(PoweRoy의 코멘트 및 Erik의 답변에 따라) 발생하는 속성:

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

이렇게 쓸 수도 있어요.

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

그게 더 나은 방법은 아니지만 방법이야:)

솔루션 1: (일반)

<a href="#!" class="someclass">Text</a>

---

(필요한 경우)2: (필요한 경우)javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

---

(필요한 경우)3: (필요한 경우)jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

하시면 됩니다.event.preventDefault()이걸 피하기 위해서.자세한 것은, http://api.jquery.com/event.preventDefault/ 를 참조해 주세요.

쓰세요.<input type="button" /><a>원하는 경우 CSS를 사용하여 링크처럼 스타일링할 수 있습니다.

버튼은 클릭 전용으로 만들어져 있으며 href 속성은 필요하지 않습니다.

가장 좋은 방법은 버튼을 만들고 javascript를 통해 필요한 곳에 추가하는 것입니다.그래서 javascript가 비활성화되어도 전혀 표시되지 않고 사용자에게 혼란을 주지 않습니다.

「 」를 사용하는 href="#"에이전트가 JavaScript를 지원하지 않는 경우, 동일한 위치를 가리키는 수많은 다른 링크가 나타납니다.

앵커를 사용하는 경우는, 다른 회답과 같이 http://api.jquery.com/event.preventDefault/ 를 사용할 수 있습니다.

또한 범위와 같은 다른 요소를 사용하여 클릭 이벤트를 추가할 수도 있습니다.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

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

하시면 됩니다.#0「href」이래, 「href0허용되지 id로 되지 않습니다. 이치노

<a href="#0" class="someclass">Text</a>

JavaScript 없이 페이지가 맨 위로 이동하는 것을 방지하는 4가지 유사한 방법이 있습니다.

옵션 1:

<a href="#0">Link</a>

옵션 2:

<a href="#!">Link</a>

옵션 3:

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

옵션 4(권장하지 않음):

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

이렇게 쓰는 게 event.preventDefault()"jQuery" "jQuery" "jQuery" 입니다.

그냥 사용하다

<a href="javascript:;" class="someclass">Text</a>

쿼리

$('.someclass').click(function(e) { alert("action here"); }

요소에 의미 있는 href 값이 없는 경우 실제로는 링크가 아니므로 다른 요소를 사용하는 것이 어떨까요?

Neotor가 제안했듯이, 스팬은 적절하며 올바르게 스타일링되면 클릭할 수 있는 항목처럼 눈에 띄게 명확해집니다.마우스를 움직이면 elemnt가 켜지도록 호버 이벤트를 첨부할 수도 있습니다.

단, 이미 말씀드린 바와 같이 javascript 없이 기능하지만 javascript를 사용할 수 있는 경우에는 javascript에 의해 강화되도록 사이트의 디자인을 재검토하는 것이 좋습니다.

href="#"인 링크는 거의 항상 버튼 요소로 대체해야 합니다.

<button class="someclass">Text</button>

href="#"과 함께 링크를 사용하는 것도 접근성에 대한 우려 사항입니다. 이러한 링크는 화면 판독기에서 "링크 - 텍스트"를 읽을 수 있지만 사용자가 클릭해도 아무데도 표시되지 않습니다.

href 속성 없이 앵커 태그를 전달하고 jQuery를 사용하여 필요한 작업을 수행할 수 있습니다.

<a class="foo">bar</a>

사용한 적이 있습니다.

<a href="javascript://nop/" class="someClass">Text</a>

항상 사용해 왔습니다.

<a href="#?">Some text</a>

페이지 점프를 방지하려고 할 때 사용합니다.이게 최선인지는 모르겠지만 몇 년 동안 잘 작동한 것 같아요.

그#/trick은 동작하지만 브라우저에 이력 이벤트를 추가합니다.따라서 사용자가 원하는/예상대로 다시 클릭할 수 없습니다.

$('body').on('click', 'a[href="#"]', function(e) {e.preventDefault() });기존 콘텐츠 및 로드 후 DOM에 추가된 요소에 대해 작동하기 때문에 제가 갔던 방법입니다.

구체적으로는, 이 조작을 부트스트랩 드롭 다운 메뉴로 실행할 필요가 있었습니다..btn-group(참조인) 그래서 내가 했어:

$('body').on('click', '.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

이렇게 하면 타깃이 되고 페이지의 다른 내용에는 영향을 주지 않습니다.

jquery 처리 후 false를 반환할 수도 있습니다.

예.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

다음과 같은 것을 사용합니다.

<a href="#null" class="someclass">Text</a>

페이지가 건너뛰는 것을 방지하려면e.stopPropagation();전화한 후에e.preventDefault();:

stopPropagation는 이벤트가 DOM 트리로 올라가는 것을 방지합니다.자세한 내용은 이쪽:https://api.jquery.com/event.stoppropagation/

페이지 위로 이동하지 않고 동일한 페이지의 앵커 섹션으로 마이그레이션하려면 다음을 사용합니다.

"#" 대신 "#/"를 사용합니다.

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

다음에 무언가를 추가하다#는, 그 ID 의 요소에 페이지의 포커스를 설정합니다.가장 간단한 해결책은#/jQuery를 사용하는 경우에도 마찬가지입니다.단, jQuery에서 이벤트를 처리하는 경우에는event.preventDefault()가는 길이에요.

가장 간단한 건 이걸 하는 거였어요.

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

JS를 사용하는 이유는 대부분의 최신 사이트가 JS에 의존하기 때문입니다.

그<a href="#!">Link</a>그리고.<a href="#/">Link</a>같은 입력을 여러 번 클릭할 필요가 있는 경우는 동작하지 않습니다.여러 입력에 대해 이벤트 클릭을 한 번만 수행합니다.

여전히 최선의 방법은 하는 것이다<a href="#">Link</a>

그리고나서,

event.preventDefault();

언급URL : https://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page