EmberJS 2.18动态修改链接颜色：点击链接高亮实现求助

嘿，作为Ember新手，这个问题其实很好解决——Ember的link-to组件默认就会给当前活跃路由对应的链接添加active类，你只需要给这个类写CSS样式就能实现高亮啦！下面一步步来：

1. 利用默认的active类写高亮样式 #

你的代码里两个link-to分别有id="addlink"和class="button"，直接针对它们的active状态写CSS就行：

/* 给MANUAL ADD链接添加高亮样式 */
#addlink.active {
  background-color: #4CAF50; /* 示例绿色背景 */
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
}

/* 给CSV ADD按钮链接添加高亮样式 */
.button.active {
  background-color: #2196F3; /* 示例蓝色背景 */
  border-color: #1976D2;
  color: white;
}

把这段CSS放到你的样式文件里（比如app/styles/app.css），当你点击某个链接跳转到对应的路由时，该链接就会自动应用active类的样式，实现高亮效果。

2. 自定义激活类名（可选） #

如果你不想用默认的active类，Ember 2.18的link-to支持通过activeClass属性指定自定义类名：

{{#link-to 'adduser' id="addlink" activeClass="link-highlight"}}MANUAL ADD {{/link-to}}
<br>
{{#link-to 'csvadd' class="button" activeClass="btn-highlight"}} CSV ADD {{/link-to}}

然后对应写自定义类的CSS：

.link-highlight {
  /* 你的高亮样式，比如背景色、文字色调整 */
  background-color: #f0ad4e;
  color: #fff;
  padding: 4px 8px;
  border-radius: 3px;
}

.btn-highlight {
  /* 你的按钮高亮样式 */
  background-color: #d9534f;
  border-color: #c9302c;
  color: #fff;
}

3. 注意事项 #

• 确保你的路由名称adduser和csvadd是正确的，只有当当前路由和link-to指定的路由完全匹配时，才会自动添加激活类。
• 如果是嵌套路由场景，想让父路由下的所有子路由都激活某个链接，可以用current-when属性，比如{{#link-to 'parent' current-when='parent.child'}}，不过你的场景里应该用不上这个。

内容的提问来源于stack exchange，提问作者user1