bootstrap丸不"tabbing"内容

Question

我正在页面上设置 bootstrap 药丸并使用 http://getbootstrap.com/javascript/#tabs-usage 标准公式，但我收到 function is not a valid function 错误消息。我有：

<ul class="nav nav-pills" role="pilllist" id="myPill">
    <li role="presentation" class="active"><a href="#all" aria-controls="all" role="pill" data-toggle="pill">Show all</a></li>
    <li role="presentation"><a href="#car" aria-controls="car" role="pill" data-toggle="pill">Cars</a></li>
</ul>

<div class="pill-content">
    <div role="pillbpanel" class="pill-pane active" id="all">Sample of all</div>
    <div role="pillpanel" class="pill-pane" id="car">Sample for car</div>
</div>

<script>
    $(function () {
        $('#myPill a:last').pill('show')
    })
</script>

为什么我会收到此错误消息？

Answer 1

您在应该使用 .tab('show'); 的地方使用 .pills('show');，如下所示：

$(function () {
  $('#myPill a:last').tab('show')
});

此外，您的 HTML 药丸不正确：

<ul class="nav nav-pills" role="tablist" id="myPill">
  <li role="presentation" class="active"><a href="#all" aria-controls="home" role="tab" data-toggle="tab">Show All</a></li>
  <li role="presentation"><a href="#cars" aria-controls="profile" role="tab" data-toggle="tab">Cars</a></li>
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="all">Sample of All</div>  
  <div role="tabpanel" class="tab-pane" id="cars">Sample for Cars</div>
</div>

基本上，您唯一应该提到的 pill 是您的 ID（因为它的名字无关紧要）和 .nav-pills。其他一切都应该是 tab，即 tabpanel、.tab-pane 等

最后，您收到未定义函数错误的原因是 .pills() 不是一个函数。

看看这个 Bootply 以了解选项卡的工作原理。

bootstrap丸不"tabbing"内容

bootstrap pill not "tabbing" content

javascript

twitter-bootstrap

nav-pills