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"，您在其中调用了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>

Achievement

直播example

Answer 2

首先检查Ismail Farooq的答案，如果仍然无法工作，那么你需要检查你是否添加了jQuery库和bootstrap.js。添加你的两个页面，jQuery然后再引导一个，你会没事的。

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

2 个答案: