href = # div를 클릭하면 페이지가 아래로 스크롤됩니다.

Question

내 탐색 바 링크를 클릭하면 페이지가 아래로 스크롤됩니다. 이 문제를 어떻게 해결할 수 있습니까? 링크 목록이있는 탐색 모음이 있습니다. 여기

<ul class="tabs"> 
    <li><a href="#1">Tab 1</a></li> 
    <li><a href="#2">Tab 2</a></li> 
    <li><a href="#3">Tab 3</a></li> 
</ul> 

<div id="1" class="tab_content"><p>Content 1</p></div> 
<div id="2" class="tab_content"><p>Content 2</p></div> 
<div id="3" class="tab_content"><p>Content 3</p></div>  

내 jQuery 코드 다음은 HTML 여기

<ul> 
    <li><a href="page.html#1">menu item 1</a></li> 
    <li><a href="page.html#2">menu item 2</a></li> 
    <li><a href="page.html#3">menu item 3</a></li>      
</ul> 

는 내용으로 page.html (탭 메뉴의 코드와 3 명 div의은이다 :

var hash1 = location.hash; 
var hash2 = hash1.substring(1, 2); 

$(".tab_content").hide(); 
$('ul.tabs li:nth-child(' + hash2 + ')').addClass("active").show(); 
$('.tab_content:nth-child(' + hash2 + ')').show(); 


$("ul.tabs li").click(function() { 
    $("ul.tabs li").removeClass("active");/
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); 
    return false; 
}); 



$(window).on('hashchange', function(){ 
var hash = window.location.hash; 

    elements = $('a[href="' + hash + '"]'); 
    if (elements.length === 0) { 
     $("ul.tabs li:first").addClass("active").show(); 
     $(".tab_content:first").show(); 
    } else { 
     elements.click(); 
     return false;   
    } 
});  

Answer 1

왜냐하면 href="#1"은 브라우저가 id의 요소가 1 인보기를 보려면 창을 스크롤하십시오. '북마크 링크'라고합니다. 이 동작을하지 않을 경우 당신은 클릭 처리기에서 이벤트에 preventDefault()를 사용해야합니다 :

$("ul.tabs li a").click(function(e) { 
    e.preventDefault(); 
});