javascript - 使<li>元素成为 'active'而不是<a>元素

我有一个使用Bootstrap和Ember.js的无序列表。每个列表项都是显示新帖子的链接，并且每当您单击该链接时，Ember都会默认添加active类。我使用的是Bootstrap nav-pills，当该类为active时会变成蓝色。但是，Ember使链接active生效，而我希望它使整个<li>生效。

这是我的模板:

<ul class="nav nav-pills nav-stacked">
    {{#each post in controller}}
        <li class="list-group-item">
            {{#link-to 'post' post}}
                {{post.title}}
            {{/link-to}}
        </li>
    {{/each}}
</ul>

当您单击链接时，<li>如下所示:

<li class="list-group-item">
    <a id="ember360" class="ember-view active" href="#/posts/1">
        A great post
    </a>
</li>

我知道用jQuery添加此功能相当简单，但是有没有一种方法可以使<li>激活，而不是直接使用Ember或Handlebars激活<a>？我尝试将{{link-to}}放在<li>周围，但没有成功。

最佳答案

您可以使用link-to选项将<li>生成的标签更改为tagName="li"。并保留<a>标记以保持 bootstrap 样式:

<ul class="nav nav-pills nav-stacked">
    {{#each post in controller}}
          {{#link-to 'post' post tagName="li" class="list-group-item" }}
              <a href="#">{{post.title}}</a>
          {{/link-to}}
    {{/each}}
  </ul>

观看此 Action http://jsfiddle.net/marciojunior/YLN5X/

关于javascript - 使<li>元素成为 'active'而不是<a>元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20013342/