js点击左侧的内容右边标记

<div id="app">
  <ul id="left-list">
    <li data-target="mark1">Item 1</li>
    <li data-target="mark2">Item 2</li>
    <li data-target="mark3">Item 3</li>
  </ul>
  <div id="right-markers">
    <span id="mark1" class="marker hidden">Mark 1</span>
    <span id="mark2" class="marker hidden">Mark 2</span>
    <span id="mark3" class="marker hidden">Mark 3</span>
  </div>
</div>

.marker {
  display: inline-block;
  margin: 5px;
  padding: 5px;
  background-color: yellow;
}
.hidden {
  display: none;
}

document.addEventListener('DOMContentLoaded', function() {
  const listItems = document.querySelectorAll('#left-list li');
  
  listItems.forEach(item => {
    item.addEventListener('click', function() {
      const targetId = this.getAttribute('data-target');
      const markers = document.querySelectorAll('.marker');
      
      markers.forEach(marker => {
        if (marker.id === targetId) {
          marker.classList.remove('hidden'); // 显示对应的标记
        } else {
          marker.classList.add('hidden'); // 隐藏其他标记
        }
      });
    });
  });
});