如何导航到另一个页面，但根据我按下的列表中的项目显示信息？

<!-- 列表页面 -->
<ul id="project-list">
  <li data-project-id="1">项目1</li>
  <li data-project-id="2">项目2</li>
  <li data-project-id="3">项目3</li>
</ul>

<script>
  // 获取项目列表元素
  const projectList = document.getElementById('project-list');

  // 添加点击事件监听器
  projectList.addEventListener('click', (event) => {
    // 获取点击的项目信息
    const projectId = event.target.dataset.projectId;

    // 导航到目标页面并传递项目信息
    window.location.href = `target.html?projectId=${projectId}`;
  });
</script>

<!-- 目标页面（target.html） -->
<h1>目标页面</h1>

<script>
  // 获取URL参数中的项目信息
  const urlParams = new URLSearchParams(window.location.search);
  const projectId = urlParams.get('projectId');

  // 根据项目信息显示相应内容
  switch (projectId) {
    case '1':
      // 显示项目1的信息
      break;
    case '2':
      // 显示项目2的信息
      break;
    case '3':
      // 显示项目3的信息
      break;
    default:
      // 处理未知项目的情况
      break;
  }
</script>