JS实现点击一个a标签就为其增加一个class，并移除其他同作用的a标签中的class

html:

<ul>
    <li><a class="list-group-item   text-center "  href="#">中心简介</a></li>
    <li><a class="list-group-item   text-center " href="#" >师资队伍</a></li>
    <li><a class="list-group-item   text-center " href="#">组织机构</a></li>
    <li><a class="list-group-item   text-center "  href="#">荣誉与成果</a></li>
</ul>

css:

<style>
.active{
	background-color: #16356c;
}
</style>

js:

实现原理：

首先，通过JS取到所有tab的节点

var arr = document.getElementsByClassName("list-group-item   text-center");

然后只需在被选中的子节点加上.classList.add("类名")，比如：

arr[i].classList.add("active");

这样就给当前子选项卡添加了“active”类名。

然后我们把其他的选项卡的“active”移除，只需要在其他子节点的后面加上.classList.remove("类名")，比如：

arr[j].classList.remove("active");

这样就实现了我们想要的功能。

完整js代码：

<script>
  var arr = document.getElementsByClassName("list-group-item   text-center");
  for(let i=0;i<arr.length;i++){
    arr[i].onclick=function(){
      arr[i].classList.add("active");
      for(let j=0;j<arr.length;j++){
        if(j!=i){
            arr[j].classList.remove("active");
        }
      }
    }
  }
</script>