javascript - 在没有链接的情况下将 css 按钮更改为 css active

Question

我们有一个问题。我们的网站上有一个带有 CSS 样式的顶部菜单。问题是我们有附加到按钮的功能，可以简单地设置一些东西的开和关。但是我们不能使用“active”css 样式，因为这个链接没有附加 url。但是我们想在按钮处于事件状态时更改它的颜色。

有人可以帮我们解决这个问题吗？

这是我们的菜单 html:

<header>
<div class="container">
  <nav>
    <ul>
      <li><a href="javascript:void(0)" class="icon one" id="box_one">buton one</a></li>
      <li><a href="javascript:void(0)" class="icon two" id="box_two">button two</a></li>
    </ul>
  </nav>
</div>
</header>

这是触发功能，那部分工作正常。函数 change() 在 myFunction 的函数中!

document.getElementById('box_two').addEventListener("click", myFunction);

单击按钮时应激活并再次单击按钮时应关闭的部分的 Css 样式:

#actieflink:active {
padding-right: 16px;
background-color: #004D0e;
border-right: 0;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
}

我试过了，但对我不起作用

function change() {
document.getElementById("actieflink").className='active';
}

Answer 1

I have made an example here. 
http://codepen.io/anon/pen/dPRPJJ
Clicking on a link set it to active mode. 
clicking it again turns of active mode.