为什么tab1的竞争不表现在角度上？
为什么tab1的竞争不表现在角度上？
提问于 2014-09-08 12:30:53
我的选项卡条在角使用foundation.css file.My问题是，当我运行我的程序时，它不显示tab1争用，或者当我单击tab1时，它没有显示任何东西，但是当我单击tab2、tab3或tab4时，它显示了争用，为什么它不显示tab1 contend.Secondly，当用户单击任何选项卡时，如何添加活动类？
这是柱塞http://plnkr.co/edit/He6GsvQkehGRLfzoEJb0?p=preview
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/o21mnbgjar28cfv/foundation.css?dl=0" />
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="">
<dl class="tabs" data-tab>
<dd class='main.value="Tab1"'><a>Tab 1</a></dd>
<dd><a ng-click='main.value="Tab2"'>Tab 2</a></dd>
<dd><a ng-click='main.value="Tab3"'>Tab 3</a></dd>
<dd><a ng-click='main.value="Tab4"'>Tab 4</a></dd>
</dl>
<div class="tabs-content">
<div ng-switch="main.value">
<div class="content" ng-switch-when="Tab1">
<p>This is the first panel of the basic tab example. This is the first panel of the basic tab example.</p>
</div>
<div class="content" ng-switch-when="Tab2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div >
<div class="content" ng-switch-when="Tab3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
<div class="content" ng-switch-when="Tab4">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>
</div>
</div>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-09-08 12:42:28
还需要将ng-click添加到第一个选项卡：
<a ng-click='main.value="Tab1"'>Tab 1</a>若要添加活动类，请使用ng-class指令：
<dd ng-class="{ active: main.value=='Tab1'}"><a ng-click='main.value="Tab1"'>Tab 1</a></dd>
<dd ng-class="{ active: main.value=='Tab2'}"><a ng-click='main.value="Tab2"'>Tab 2</a></dd>
<dd ng-class="{ active: main.value=='Tab3'}"><a ng-click='main.value="Tab3"'>Tab 3</a></dd>
<dd ng-class="{ active: main.value=='Tab4'}"><a ng-click='main.value="Tab4"'>Tab 4</a></dd>柱塞
Stack Overflow用户
发布于 2014-09-08 12:41:13
只需将main.value的值初始化为Tab1：
ng-init='main.value="Tab1"'此外，添加一个ng类元素，用于突出显示当前选项卡：
ng-class="{ active: main.value=='Tab1'}"这是工作的柱塞
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25724329
复制相关文章
相似问题
腾讯云开发者
