Закладки Bootstrap не переключаются

Question

К сожалению, я не могу заставить свои вкладки переключаться.

Я использовал код один раз, и он сработал, я использовал те же версии jQuery и Bootstrap.

Здесь я не могу найти конфликт. В моем коде нет одинаковых идентификаторов, и, насколько я вижу, мой CSS не перезаписывает загрузочный CSS.

Я использую jQuery 2.1.4 и Bootstrap 3.3.4.

Код:

<ul id="myTab" class="nav nav-tabs"> 
    <li class="active"><a href="#home" data-toggle="tab"> 
     Tutorial Point Home</a></li> 
    <li><a href="#ios" data-toggle="tab">iOS</a></li> 
    <li><a href="#jmeter" data-toggle="tab">jmeter</a></li> 
</ul> 
<div id="myTabContent" class="tab-content"> 
    <div class="tab-pane fade in active" id="home"> 
     <p>tab1 text</p> 
    </div> 
    <div class="tab-pane fade" id="ios"> 
     <p>tab2 text</p> 
    </div> 
    <div class="tab-pane fade" id="jmeter"> 
     <p>tab3 text</p> 
    </div> 

</div> 
<script> 
    $(function(){ 
     $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     // Get the name of active tab 
     var activeTab = $(e.target).text(); 
     // Get the name of previous tab 
     var previousTab = $(e.relatedTarget).text(); 
     $(".active-tab span").html(activeTab); 
     $(".previous-tab span").html(previousTab); 
    }); 
}); 
</script> 

EDIT Я нашел код, который находится в конфликте с закладками, он отвечает за плавный скроллинг:

<script> 
    $(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 700); 
     return false; 
     } 
    } 
    }); 
}); 
</script> 

Есть ли способ, чтобы сделать их оба работают? Могу ли я изменить # для чего-то еще?

Answer 1

return false в функции animate вызывает проблему, потому что она никогда не возвращается, чтобы активировать вкладку Bootstrap. Изменить его на это ..

$(function(){ 

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
     // Get the name of active tab 
     var activeTab = $(e.target).text(); 
     // Get the name of previous tab 
     var previousTab = $(e.relatedTarget).text(); 
     $(".active-tab span").html(activeTab); 
     $(".previous-tab span").html(previousTab); 
    }); 

    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 700); 
     } 
    } 
    }); 

}); 

Демо: http://codeply.com/go/R4VRTQcx46