Chrome的开发者工具如何强制元素状态？我怎么能用JavaScript做同样的事情？

Question

我正在使用SPA（使用Angular 4），并希望在我的弹出窗口中添加滑动下划线菜单，就像this one一样。

但这不是页面菜单，因此活动状态不能基于路径。打开弹出窗口时，第一个元素将是默认元素。 我想要实现的是使用JavaScript将第二个，第三个等元素设置为活动，因此一旦点击第二个项目，它将被加下划线。 我的代码几乎相同，我所做的只是添加：活动状态。

.two:hover ~ hr, .two:active ~ hr  {
  margin-left: 25%;
}

.three:hover ~ hr, .three:active ~ hr  {
  margin-left: 50%;
}

.four:hover ~ hr, .four:active ~ hr {
  margin-left: 75%;
}

有谁知道Chrome的开发者工具如何更改为“活动”状态？ 理想情况下，会有一些JavaScript函数完全相同，所以我可以在触发click函数时简单地调用它。

任何帮助实现这一目标都将受到高度赞赏。