Question

我正在尝试根据当前状态向导航标签添加.active类，但由于状态为:id，因此将active类添加到多个标签。

我的状态如此：

$stateProvider
  .state('genre', {
      url: "/movie/genre/:id",
      templateUrl: "views/movie/genre.html",
  });

我在我的标记上使用ui-sref和ui-sref-active，如下所示：

<li ui-sref="genre" ui-sref-active="active">
    <a href="#/movie/genre/horror">Horror</a>
</li>
<li ui-sref="genre" ui-sref-active="active">
    <a href="#/movie/genre/romance">Horror</a>
</li>
...

所以尽管在site.com/movie/genre/horror上，我在两个标签上都获得了.active课程，而不仅仅是恐怖页面。

对此有任何帮助表示赞赏。

提前致谢！

Answer 1

该类适用于您的活动状态。您的州是＆＃39;流派＆＃39;，它对您的ui-sref属性都有效。

我做了一个适合你here的傻瓜。

<li ui-sref-active="active">
  <a ui-sref="genre({id: 'horror'})">Horror</a>
</li>
<li ui-sref-active="active">
  <a ui-sref="genre({id: 'romance'})">romance</a>
</li>

Answer 2

您不必使用href，您必须使用ui-router状态进行导航。在这种情况下，您必须在ui-sref中传递参数。并且摆脱href。

ui-sref="genre({id:'horror'})"

Angular：根据当前状态添加.active类

2 个答案: