在单击项目时在列表组和div之间切换

<div class="list-group">
  <a href="#" class="list-group-item">项目1</a>
  <a href="#" class="list-group-item">项目2</a>
  <a href="#" class="list-group-item">项目3</a>
</div>

<div id="content" class="hidden">
  <p>这是项目1的内容。</p>
</div>

.hidden {
  display: none;
}

var listItems = document.querySelectorAll('.list-group-item');
var contentDiv = document.getElementById('content');

for (var i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener('click', function() {
    // 切换选中项目的样式
    for (var j = 0; j < listItems.length; j++) {
      listItems[j].classList.remove('active');
    }
    this.classList.add('active');

    // 切换内容显示
    contentDiv.innerHTML = '<p>这是' + this.innerHTML + '的内容。</p>';
    contentDiv.classList.remove('hidden');
  });
}