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

您正在使用.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以查看标签的工作原理。

引导药丸不是＆＃34; tabbing＆＃34;内容

1 个答案: