javascript - 如何在页面加载时默认将列表标记设为选中或激活

Question

我正在使用ui-sref-active="active"使所选<li>标签处于活动状态，但我希望列表标签在三个列表标签中作为默认标签处于活动状态

<li ui-sref-active="active" class="item active"><a data-ng-click="search.status = ''" href="">ALL PROJECTS</a></li>
<li ui-sref-active="active"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
<li ui-sref-active="active"><a data-ng-click="search.status = 'CATEGORY'" href="">NOTIFICATIONS</a></li>

我希望第一个列表标签默认处于活动状态，然后当用户单击任何其他列表标签时，它应该停用并激活其他列表标签

我正在使用这个指令：http ://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

Answer 1

您可以使用 ng-class 动态打开和关闭“活动”类。

<li ui-sref-active="active" ng-class="{active: activeTab1}"><a data-ng-click="search.status = ''" href="">ALL PROJECTS</a></li>
<li ui-sref-active="active" ng-class="{active: activeTab2}"><a data-ng-click="search.status = 'PORTFOLIO'" href="">PORTFOLIO</a></li>
<li ui-sref-active="active" ng-class="{active: activeTab3}"><a data-ng-click="search.status = 'CATEGORY'" href="">NOTIFICATIONS</a></li>

在您的控制器中，您可以根据用户单击的列表标签打开和关闭 activeTab1、2 和 3。您可以将 activeTab1 默认设置为 true。

更新

由于语法原因，在 ng-class 中添加了 {}

这是Plunker中的一个工作示例