새 탭 (jQuery 탭)을 클릭하면 페이지가 위로 이동합니다

Question

jQuery 탭을 ajax와 함께 사용하고 있습니다.

HTML :

<div id="tabs"> 
    <ul> 
     <li><a id='tab-1' href="/get-1.htm">1</a></li> 
     <li><a id='tab-2' href="/get-2.htm">2</a></li> 
     <li><a id='tab-3' href="/get-3.htm">3</a></li> 
    </ul> 
</div> 

JQuery와 :

<!----------------------- IMAGE START ----------------------->

012,391,366,768 :

$("#tabs").tabs({ 
    beforeLoad: function(event, ui) { 
     ui.jqXHR.error(function() { 
      ui.panel.html 
      (
       "bla bla bla"; 
      ); 
     }); 
    } 
}); 

GIF의 문제를 도시 더 링크 (선택 MP4)를 확인 smoothier를 들어

: click me

내가 두번째 탭을 클릭은 페이지 상단으로 증가했다. 또 다른 예 : 이미 이전 탭을 열 경우 (,, 1 차에 있던 2 누를 것을

<!----------------------- IMAGE START ----------------------->

<!----------------------- IMAGE END ----------------------->

more smoothier

주 (2 예) 뛰어 1을 누르면 , 점프 없음).

어떻게이 문제를 해결할 수 있습니까?

UPDATE

슬픈 않지만, 예를 https://jqueryui.com/tabs/가 잘 작동되고 :(에는 같은 버그가 없습니다.

Answer 1

당신은 현재 탭보다 내용이 탭의 전체 높이를 클릭하면 페이지의 스크롤 위치에 영향을 줄 수있는 페이지가 변경됩니다.이 문제를 해결하는 한 가지 방법은 heightStyle 옵션을 사용하여이를 "auto"로 설정하는 것입니다. 그러나 아약스 탭에서 어떻게 작동하는지 완전히 확신하지는 못합니다

http://api.jqueryui.com/tabs/#option-heightStyle

$(".selector").tabs({ heightStyle: "fill" }); 

샘플 : TAB2는 훨씬 적은 내용을 가지고 있기 때문에 당신이 다음의 H1을 참조 탭 2. 클릭 수 없을 때까지 탭 하나에 http://jsfiddle.net/4uhjF/ 클릭, 스크롤, 페이지의 높이 점프를 일으킬 정도 변경 상단으로. 이 문제를 해결하는 유일한 방법은 모든 탭의 내용이 비슷한 높이인지 확인하거나 높이를 특정 숫자로 설정하고 해당 높이보다 큰 내용을 스크롤하는 것입니다. heightStyle : 탭 컨테이너의 부모 요소 높이를 설정하여 아약스로드 된 탭의 높이를 제어 할 수 있기 때문에 "채우기"가 가장 좋습니다.