我尝试在我的应用程序中实现标签导航栏。我使用Bootstrap3并遵循此示例Boostrap Tabs和Pills。
我#home每次都会显示一个标签（）。单击addInput（）函数时要生成的其他选项卡。即tab1，tab2，tab3。
我不知道该如何组合。如何创建带有href="#menu1"导航栏的列表元素，并为标签内的内容设置id =“ menu1”。
这是我的示例CodePen.io
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<label for="txtDevice" class="control-label">Form Field 1</label>
<input type="text" class="form-control" ng-model="info.name" id="txtDevice">
</div>
<div class="form-group">
<label for="txtIP" class="control-label">Form Field 2</label>
<input type="text" class="form-control" ng-model="info.ip" id="txtIP">
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
</ul>
<div class="form-group tab-content">
<div id="home" class="tab-pane fade in active">
<h4>Home</h4>
<p>content</p>
</div>
<div ng-repeat="site in info.sites track by $index">
<h4>tab {{$index +1}}</h4>
<p>content</p>
</div>
</div>
</form>
<button ng-click="addInput()">+add more inputs</button>
{{info | json}}
<hr>
tags = {{tags | json}}
</div>
您的笔大约有四处错误，我已在此处修复（http://codepen.io/anon/pen/eBRwev?editors=1010）
您的标签导航中没有ng-repeat标签标题
<ul id="myTabs" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li ng-repeat="site in info.sites track by $index" class="tab-pane fade in">
<a data-toggle="tab" href="#tab-{{$index}}" >Tab #{{$index}}</a>
</li>
</ul>
您忘记了包括使用引导程序选项卡所需的jQuery和Bootstrap JS库。
您必须调用以下JS片段来激活选项卡上的引导单击处理
$('#myTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句