按钮激活状态下颜色切换与下划线效果实现求助

需求：点击按钮时，按钮改变颜色并显示下划线。

已编写的CSS与HTML代码：

.menu_item {
  display: inline-block;
  position: relative;
}

.menu_link {
  font-family: "Montserrat";
  font-size: 20px;
  font-weight: 600;
  color: grey;
  letter-spacing: 0.6px;
}

.menu_link:hover,
.menu_link.active {
  color: black;
}

.menu_link:after {
  content: '';
  position: absolute;
  width: 125%;
  transform: scaleX(0);
  height: 3px;
  bottom: -30px;
  left: -.8rem;
  background-color: black;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.menu_link:hover:after,
.menu_link.active:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

<ul class="menu p-0">
  <li class="menu_item me-5">
    <a class="text-decoration-none menu_link" type="button" id="btnContact">Contact Us</a>
  </li>
  <li class="menu_item">
    <a class="text-decoration-none menu_link" type="button" id="btnLocation">Location</a>
  </li>
</ul>

按钮效果参考：

尝试的JS代码（仅能实现颜色切换，无法触发:after下划线效果）：

var btnMenu1 = document.getElementById("btnContact");
var btnMenu2 = document.getElementById("btnLocation");

btnMenu1.onclick = function() {
  btnMenu1.style.color = "black";
  btnMenu2.style.color = "grey";
}
btnMenu2.onclick = function() {
  btnMenu1.style.color = "grey";
  btnMenu2.style.color = "black";
}

解决方案：
你的CSS已经通过.menu_link.active和.menu_link.active:after定义了激活状态的完整样式，不需要直接操作元素行内样式，只需通过JS切换active类即可同时触发颜色和下划线效果：

var menuActive = '.menu_link';
$(menuActive).on('click', function(){
    $(menuActive).removeClass('active');
    $(this).addClass('active');
});

实现逻辑：点击任意按钮时，先移除所有.menu_link元素的active类，再给当前点击的元素添加active类，完全复用你已写好的CSS规则，实现激活状态的样式切换。

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