javascript - 如何在 Bootstrap 中设置默认选项卡

Question

我有一个关于我的 Angular Bootstrap UI 的问题。

我有这样的东西:

<div class="container" ng-controller='sCtrl'>
    <tabset id='tabs'>
        <tab heading="Title1" >
        </tab>
        <tab heading="Title2" active ="true">
        </tab>
        <tab heading="Title3">
        </tab>
    </tabset>
</div>

我的问题是每次我在我的选项卡中添加 active='true' 时，我都会得到:

TypeError: undefined is not a function
    at Object.fn (http://test.com/lib/ui-bootstrap-tpls-0.10.0.js:2762:11)
    at h.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:106:71)
    at h.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:370)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:71:120)
    at C (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:75:241)
    at XMLHttpRequest.y.onreadystatechange (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:76:280) 

我搜索了谷歌并移动了在 Bootstrap 文件之前加载的 jQuery 文件，但仍然遇到相同的错误。谁能帮我解决这个问题？多谢!

Answer 1

简短的回答正是您在问题中引用的内容 - 如果您在代码或 HTML 中将 active 设置为 true，它会选择选项卡。有两种创建选项卡的方法:

• 静态标签:

  <tabset id="tabs">
    <tab heading="Title1"></tab>
    <tab heading="Title2" active="true"></tab>
    <tab heading="Title3"></tab>
  </tabset>
  

  如果您在这里设置 active="true"，该选项卡将成为默认的事件选项卡。

• 动态标签:

  HTML

  <tabset id="tabs2">
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"></tab>
  </tabset>
  

  Javascript

    $scope.tabs = [
      {"title": "Dynamic 1", "active": false},
      {"title": "Dynamic 2", "active": true},
      {"title": "Dynamic 3", "active": false}];
  

要查看这两者是否正常工作，请检查这个插件:http://plnkr.co/edit/nR9GNIhGAmha8Rh85lUa?p=preview