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

在Web开发中，实现点击左侧内容时在右侧进行标记的功能，通常涉及到前端JavaScript与HTML的交互。以下是该功能的基础概念、实现方法及其应用场景：

基础概念

DOM操作：JavaScript可以修改HTML文档的结构、样式和内容。
事件监听：为元素添加事件监听器，以便在特定事件（如点击）发生时执行代码。
条件渲染：根据某些条件显示或隐藏页面上的元素。

实现方法

以下是一个简单的示例，展示如何通过JavaScript实现点击左侧列表项时，在右侧显示对应标记的功能。

HTML结构

<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>

CSS样式

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

JavaScript代码

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'); // 隐藏其他标记
        }
      });
    });
  });
});