因此，当您通过其他li元素触发click事件循环并删除active类时，然后将active类添加到所单击的li项，与tabs相同

const lis = document.querySelectorAll('.list-group-item');
const tabs = document.querySelectorAll('.tab-pane');

lis.forEach(li => {
  li.addEventListener('click', () => {
    lis.forEach(li => li.classList.remove('active'));
    li.classList.add('active');
    const targetTab = document.querySelector(li.getAttribute('href'));
    tabs.forEach(tab => tab.classList.remove('active'));
    targetTab.classList.add('active');
  })
})

.active {
  color: red;
}

<!-- List group -->
<ul class="list-group" id="myList" role="tablist">
  <li class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</li>
  <li class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</li>
  <li class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</li>
  <li class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">A</div>
  <div class="tab-pane" id="profile" role="tabpanel">B</div>
  <div class="tab-pane" id="messages" role="tabpanel">C</div>
  <div class="tab-pane" id="settings" role="tabpanel">D</div>
</div>

Bootstrap有内置的navs来处理这个问题，所以没有必要使用list-group和自定义的javascript。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills">
      <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
      <a class="nav-link" data-toggle="pill" href="#profile">Profile</a>
      <a class="nav-link" data-toggle="pill" href="#messages">Messages</a>
      <a class="nav-link" data-toggle="pill" href="#settings">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="home">A</div>
      <div class="tab-pane fade" id="profile">B</div>
      <div class="tab-pane fade" id="messages">C</div>
      <div class="tab-pane fade" id="settings">D</div>
    </div>
  </div>
</div>