Bootstrap Tabs - Запретить прокрутку вверх

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 вызывает проблему. Как отключить поведение по умолчанию для этих вкладок/ссылок? Любые мысли по этому ...

Answer 1

Он отлично работает в версиях Bootstrap менее 3. И в Bootstrap 3 вы должны включить стили 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> 

здесь скрипку http://jsfiddle.net/9CDMh/

Answer 2

Я установил это, добавив e.stopImmediatePropagation(); обработчик событий:

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

Answer 3

Вы можете использовать: <a data-target="#home"> вместо <a href="#home">

Смотрите здесь для примера: http://jsfiddle.net/RPSmedia/K9LpL/1154/