bootstrap tab не работает отдельно

Question

У меня есть сайт, который не базируется ни на одной известной структуре. Тем не менее я решил использовать вкладки начальной загрузки, поскольку они довольно гибкие и простые в использовании. Поэтому я подготовил такой jsfiddle: enter link description here

, к сожалению, не работает. Почему это? Я взял файл tab.js из cdn. Код очень прост:

<div class="container"> 
    <h2>Dynamic Tabs</h2> 
    <ul id="tabs" class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
     <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
    </div> 
    </div> 
</div> 

CSS

.nav-tabs { 
    border-bottom: 1px solid #ddd; 
} 

.nav-tabs:before, 
.nav-tabs:after { 
    display: table; 
    content: " "; 
} 

.nav-tabs:after { 
    clear: both; 
} 

.nav-tabs .nav-item { 
    float: left; 
    margin-bottom: -1px; 
} 

.nav-tabs .nav-item + .nav-item { 
    margin-left: .2rem; 
} 

.nav-tabs .nav-link { 
    display: block; 
    padding: .5em 1em; 
    border: 1px solid transparent; 
    border-radius: .25rem .25rem 0 0; 
} 

.nav-tabs .nav-link:focus, 
.nav-tabs .nav-link:hover { 
    border-color: #eceeef #eceeef #ddd; 
} 

.nav-tabs .nav-link.disabled, 
.nav-tabs .nav-link.disabled:focus, 
.nav-tabs .nav-link.disabled:hover { 
    color: #818a91; 
    background-color: transparent; 
    border-color: transparent; 
} 

.nav-tabs .nav-link.active, 
.nav-tabs .nav-link.active:focus, 
.nav-tabs .nav-link.active:hover, 
.nav-tabs .nav-item.open .nav-link, 
.nav-tabs .nav-item.open .nav-link:focus, 
.nav-tabs .nav-item.open .nav-link:hover { 
    color: #55595c; 
    background-color: #fff; 
    border-color: #ddd #ddd transparent; 
} 
.tab-content > .tab-pane { 
    display: none; 
} 

.tab-content > .active { 
    display: block; 
} 

JS

jQuery(document).ready(function ($) { 
     $('#tabs li a').tab(); 
    }); 

Answer 1

Вы с помощью tab.js для Bootstrap 4.0 alpha, который, похоже, немного отличается от Stable Bootstrap 3 vers ион.

Просто включите все javascript из Bootstrap 3 из official CDN или включите tab.js из другого источника.

Answer 2

Вам нужно включить CSS Bootstrap, чтобы получить вкладку стиль: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

Answer 3

Я думаю, что добавление только следующего кода будет работать супер, также вам не понадобится tab.jsдля этого.

Working : Demo

JQuery

$("#tabs li").click(function(){ 
    $("#tabs li").removeClass("active"); 
    $(this).addClass("active");  
    var href = $(this).find("a").attr('href'); 
    href = href.substring(1); 
    $(".tab-content .tab-pane").removeClass("in active"); 
    $("#" + href).addClass("in active"); 
});