0

我正在页面上设置引导药丸并使用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>

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

4

1 回答 1

4

您正在使用.pills('show');您应该使用的地方.tab('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看看标签是如何工作的。

于 2015-04-20T19:11:58.927 回答