jquery - 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 中错过了 #，例如您调用 ID 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>

直播example