为Javascript激活的标题设置标题样式

所以对于我的网站，我已经成功地划分了信息部分，其中页面内容可以变化。唯一的问题是，现在我无法看到哪个标题的内容被激活

这是它的主要功能，我尝试的是在显示相应内容时突出显示选定的标题

第一个Javascript代码：

function toggle_visibility(id) {
    var infoBox = document.getElementsByClassName("info");
    for (var i = 0; i < infoBox.length; i++) {
        infoBox[i].style.display = 'none';
    }
    var e = document.getElementById(id);
    if(e.style.display == 'block') {
        e.style.display = 'none';
    } else {
        e.style.display = 'block';
    }
}

有人能帮我吗

Jquery:-

   $(".heading").click(function(){    
        if(!$(this).hasClass("active")){
            $(".heading").removeClass("active");
            $(this).addClass("active");
        }   
    });

使用以下内容更新CSS：

.active{
    color:red:
    border-bottom: 2px #7D5B61 solid !important;
}

和HTML

<a class="heading active" onclick="toggle_visibility('info1');">

---

Js Fiddle Here:-

这几乎正是我想要的。但是如何使边框底部的颜色也变为2px7d5b61纯色？我试着用class.active进行实验，但它似乎只对颜色起作用：/n这是因为on.infoWrapper.infoHead.heading css部分覆盖了边框颜色，所以如果包括！重要的是，它将确保正在使用一个。我已经为你更新了答案，非常感谢！我已经在这上面呆了很长时间了