如何更改<ul>中的内容，使其与当前单击的按钮相匹配？

<button data-target="content1">按钮1</button>
<button data-target="content2">按钮2</button>
<button data-target="content3">按钮3</button>

const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
  button.addEventListener('click', handleClick);
});

function handleClick(event) {
  const target = event.target;
  const contentId = target.dataset.target;
  
  // 根据contentId获取对应的内容元素
  const content = document.getElementById(contentId);
  
  // 将内容元素显示出来，同时隐藏其他内容元素
  const contents = document.querySelectorAll('.content');
  contents.forEach(c => {
    if (c.id === contentId) {
      c.style.display = 'block';
    } else {
      c.style.display = 'none';
    }
  });
}

<div id="content1" class="content">内容1</div>
<div id="content2" class="content">内容2</div>
<div id="content3" class="content">内容3</div>

.content {
  display: none;
}