bootstrap nav-pills在没有javascript的情况下无法正常工作

Question

在bootstrap文档中，他们说您可以在不编写任何JavaScript的情况下激活选项卡或药片导航。我试着像他们所说的那样，只需在元素上指定data-toggle="tab"，然后用href和ID指定。但它不起作用。 我需要添加其他东西吗？

<ul class="nav nav-pills nav-stacked col-xs-3"> 
    <li><a data-toggle="tab" href="one">one</a></li> 
    <li><a data-toggle="tab" href="two">two</a></li> 
    <li><a data-toggle="tab" href="three">three</a></li> 
    <li><a data-toggle="tab" href="four">four</a></li> 
</ul> 
<div class="tab-content col-xs-9"> 
    <div id="one" class="tab-pane active"> 
    Germany 
    </div> 
    <div id="two" class="tab-pane"> 
    France 
    </div> 
    <div id="three" class="tab-pane"> 
    Italy 
    </div> 
    <div id="four" class="tab-pane"> 
    Spain 
    </div> 
</div> 

Answer 1

您在href错过#，你叫例如href="#one"

<ul class="nav nav-pills nav-stacked col-xs-3"> 
    <li><a data-toggle="tab" href="#one">one</a></li> 
    <li><a data-toggle="tab" href="#two">two</a></li> 
    <li><a data-toggle="tab" href="#three">three</a></li> 
    <li><a data-toggle="tab" href="#four">four</a></li> 
</ul> 
<div class="tab-content col-xs-9"> 
    <div id="one" class="tab-pane active"> 
    Germany 
    </div> 
    <div id="two" class="tab-pane"> 
    France 
    </div> 
    <div id="three" class="tab-pane"> 
    Italy 
    </div> 
    <div id="four" class="tab-pane"> 
    Spain 
    </div> 
</div> 

Live ID的example

Answer 2

检查Ismail Farooq先回答，如果仍然不行，那么你需要检查你是否同时添加了jQuery库和bootstrap.js。将这两个页面添加到两个页面中，首先使用jQuery，然后引导一个页面，这样你会很好。