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

我正在使用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

最佳答案

您可以使用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中的一个有效示例

关于javascript - 如何在页面加载时将列表标记默认设置为选中或激活，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37696026/