这就是HTML/CSS中:focus状态的工作方式。你已经点击了某个东西，现在你的焦点在你点击其他东西之前。看看下面的demo。当有焦点时，它将有一个绿色的边界。点击一个，它有焦点。单击离开或按Tab键更改焦点。
如果你不想这样的话，就删除你的:focus样式。

button {
  border: 4px solid #333;
  font-weight: bold;
  font-size: 16px;
}

button:active {
  color: red;
}

button:focus {
  border-color: lightgreen;
  outline: none;
}

<button type="button">one</button>
<button type="button">two</button>
<button type="button">three</button>

修改/编辑答案

我不知道你想保持链接下划线。在这种情况下，这甚至更容易。您只需要在选中某个类时应用它，然后将它从其他类中删除。它非常接近你已经发布的代码，但我认为你只需要有更简单的CSS，而不扰乱:focus状态。如果应用了类，则它看起来是活动的。就是这样。
这是一个使用jQuery的版本。

var $buttons = $('button');
$buttons.on('click', function() {
  $(this).addClass('active').siblings('button').removeClass('active');
});

button {
  padding: 5px;
  font-weight: bold;
}

.active {
  text-decoration: underline;
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button">one</button>
<button type="button">two</button>
<button type="button">three</button>

这里有一个版本可以做同样的事情，但不需要jQuery。

document.querySelectorAll('button').forEach(function(thisBtn) {
  thisBtn.addEventListener('click', function() {
    var prevBtn = document.querySelector('button.active');
    if(prevBtn) {
      prevBtn.classList.remove('active');
    }
    
    thisBtn.classList.add('active');
  }, false);
});

button {
  padding: 5px;
  font-weight: bold;
}

.active {
  text-decoration: underline;
  background-color: lightgreen;
}

<button type="button">one</button>
<button type="button">two</button>
<button type="button">three</button>

正如我从问题和附加代码中所理解的，您希望在单击时对特定按钮进行样式化，并且在单击其他位置时不应影响此效果。您提供的代码包含更多详细信息。您必须有一个包含活动类的焦点按钮，并且希望即使该按钮没有焦点，效果也能继续。光靠上课就够了，不需要靠专注。

Here's a code for the solution:

 https://codepen.io/mohammed-albadry/pen/wvQaPLq.