Question

我在使用foundation.css文件时有角度的标签栏。我的问题是，当我运行我的程序时它不显示tab1竞争或当我点击tab1它没有显示任何东西但是当我点击tab2或tab3或tab4它显示它争辩。但是为什么它没有显示tab1竞争。其次如何在用户点击任何标签时添加活动类？

这里是plunker 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>

Answer 1

只需将main.value的值初始化为Tab1：

ng-init='main.value="Tab1"'

另外添加一个ng-class元素以突出显示当前选项卡：

ng-class="{ active: main.value=='Tab1'}"

这是工作plunker

Answer 2

您还需要将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>

<强> Plunker

为什么标签1的内容没有显示角度？

2 个答案: