javascript - 第一个选项卡内容不会随着 Bootstrap 而消失

Question

我想在 twitter bootstrap 中使用选项卡功能，但它无法正常工作。

我有一个像这样的 HTML。

<ul class="nav nav-tabs" id="tabs" data-tabs="tabs">
  <li class="active"><a href="#foo" data-toggle="tab">Foo</a></li>
  <li><a href="#bar" data-toggle="tab">Bar</a></li>
</ul>
<div class="tab-content">
  <div id="foo" class="tab-tane active">
    foo
  </div>
  <div id="bar" class="tab-pane">
    bar
  </div>
</div>

还有它的 CoffeeScript 。

$ ->
  $('#tabs a').click (e) ->
    e.preventDefault()
    $(@).tab('show')

当我单击第二个选项卡时，不知怎的，第一个选项卡的内容仍然显示。

这是我在jsfiddle中写的。 http://jsfiddle.net/fe26/ER2UG/

我做错了什么？

Answer 1

你的html有错误。更改tab-tane:

<div id="foo" class="tab-tane active"> 

到选项卡 Pane :

<div id="foo" class="tab-pane active">