스크립트를 스크롤하지 못하도록 페이지 맨 위로 돌아 가기 onclick

Question

탭이있는 탐색에 사용하는 간단한 스크립트가 있습니다. 그냥 숨기고 div를 보여줍니다. 그러나 탭에서 탭으로 변경하면 항상 화면이 맨 위로 이동합니다! 누구든지이 문제를 어떻게 방지 할 수 있는지 알고 있습니까? 내 스크립트는 다음과 같습니다.

Answer 1

클릭 처리기에는 이 필요합니다.

이렇게하면 브라우저가 위쪽으로 이동하지 않습니다.

과 같이 :

//On Click Event 
$("ul.tabs li").click(function(e) { 
    e.preventDefault(); 
    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
    $(activeTab).fadeIn(); //Fade in the active content 
    return false; 
}); 

Answer 2

가 <li/> 태그가 아닌 <a/> 태그를 대상으로하여 클릭 핸들러를 변경해보십시오 :

//On Click Event 
$('ul.tabs li a').click(function() { 
    $('ul.tabs li').removeClass('active'); 
    $(this).closest('li').addClass('active'); 
    $('.tab_content').hide(); 
    var activeTab = $(this).attr('href'); 
    $(activeTab).fadeIn(); 

    return false; // prevent default action of <a/> element 
}); 

이 일어나고있는 이유는, 당신은 반환 되더라도 <li/> 태그에 대한 클릭 핸들러에서 false이면 <a/> 태그의 클릭 이벤트가 발생하고 <li/> 태그 내에 포함 된 것과 동시에 트리거됩니다. </a> 태그의 기본 동작을 방해하는 클릭 핸들러가 없으므로 페이지가 맨 위로 이동합니다. href 속성이 해시로 시작한다고 가정합니다.

도움이 되었기를 바랍니다.