bootstrap选项卡不能单独工作

Question

我有一个不基于任何已知框架的网站。然而，我决定使用引导标签，因为它们非常灵活且易于使用。所以我准备了这样的jsfiddle： enter link description here

不幸的是，它不工作。这是为什么？我从cdn取得了tab.js文件。该代码非常简单：

<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

您使用Bootstrap 4.0 alpha的tab.js，它似乎与Stable Bootstrap 3 vers有点不同离子。

只需包含来自official CDN的所有Bootstrap 3 javascript，或包含来自其他来源的tab.js。

Answer 2

您需要包括引导的CSS来获取标签样式：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"); 
});