부트 스트랩 탭 - 화면 스크롤 방지

Question

이것은 내 탭의 레이아웃입니다. T1 및 T2는 일반 탭 섹션입니다. T3 내부에는 계단식 탭이 있습니다. 아래의 마크 업을 찾으십시오.

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#T1">Tab1</a></li> 
     <li class=""><a href="#T2">Tab2</a></li> 
     <li class=""><a href="#T3">Tab3</a></li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
    <div class="tab-pane" id="T2"> 
     Tab 2 Content... 
    </div> 
    <div class="tab-pane" id="T3"> 
      <div class="tabbable tabs-left"> 
        <ul class="nav nav-tabs"> 
          <li class="active"><a href="#Chart" data-toggle="tab">Chart</a></li> 
           <li><a href="#Report" data-toggle="tab">Reports</a></li> 
        </ul> 
        <div class="tab-content"> 
         <div class="tab-pane active"> 
           Chart Content... 
         </div> 
         <div class="tab-pane" style="float: right;width: 96%;"> 
           Report Content... 
         </div> 
        </div> 
      </div> 
    </div> 
</div> 

문제는 T3이 스크롤되는 동안 페이지가 위로 스크롤되는 것입니다. 또한 JS 측면에서 아래 그림과 같이 preventDefault 메서드를 호출합니다.

$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
} 

T3 내부의 계단식 탭에서 문제가 발생한다고 생각합니다. 해당 탭/링크의 기본 동작을 어떻게 비활성화 할 수 있습니까? 탭은 왼쪽과 탭이 오른쪽

내가 바이올린 점검을 만든 것은 적은 3 이상 그리고 부트 스트랩 3 부트 스트랩 버전에서 잘 작동

Answer 1

이 어떤 생각 ... 당신이 CSS 스타일을 포함해야 여기

<div class="tabbable tabs-left" style="margin-top:10px;"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li> 
      <li><a href="#lB" data-toggle="tab">Section 2</a></li> 
      <li><a href="#lC" data-toggle="tab">Section 3</a></li> 
     </ul> 
     <div class="tab-content"> 
      <div class="tab-pane active" id="lA"> 
       <p>I'm in Section A.</p> 
      </div> 
      <div class="tab-pane" id="lB"> 
       <p>Howdy, I'm in Section B.</p> 
      </div> 
      <div class="tab-pane" id="lC"> 
       <p>What up girl, this is Section C.</p> 
      </div> 
     </div> 
    </div> 

내가 e.stopImmediatePropagation 추가하여이 고정 바이올린 http://jsfiddle.net/9CDMh/

Answer 2

()이고; 이벤트 핸들러 :

$('.nav-tabs li a').click(function(e){ 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    $(this).tab('show'); 
}); 

Answer 3

당신은 사용할 수 있습니다 : 탭은 모두 잘 작동 http://jsfiddle.net/RPSmedia/K9LpL/1154/