Javascript 当标题被点击时，如何使内容出现在另一个div上

const entries = document.querySelectorAll(".entry");
const contents = document.querySelectorAll('.entry-content');

const getChildIndex = el => [].indexOf.call(el.parentNode.children, el);
const hideAllContent = () => contents.forEach(c => c.classList.remove('show'));

entries.forEach(entry => {
  entry.addEventListener('click', e => {
    hideAllContent();
    
    const index = getChildIndex(e.target);
    contents[index].classList.add('show');
  });
});

.entry {
  color: #d49a95;
  cursor: pointer;
  padding: 10px;
}

.entry-content {
  display: none;
}

.show {
  display: block;
}

<div class="main">
  <div class="sidenav">
    <div class="entry">test</div>
    <div class="entry">test2</div>
  </div>
  <main>
    <center>
      <p class="entry-content">helloo</p>
      <p class="entry-content">hiiii</p>
    </center>
  </main>
</div>

const entries = document.querySelectorAll(".entry");
const contents = document.querySelectorAll('.entry-content');
const hideAllContent = () => contents.forEach(c => c.classList.remove('show'));

entries.forEach(entry => {
  entry.addEventListener('click', e => {
    hideAllContent();
    document.querySelector(e.target.dataset.content).classList.add('show');
  });
});

.entry {
  color: #d49a95;
  cursor: pointer;
  padding: 10px;
}

.entry-content {
  display: none;
}

.show {
  display: block;
}

<div class="main">
  <div class="sidenav">
    <div class="entry" data-content="#content-a">test</div>
    <div class="entry" data-content="#content-b">test2</div>
  </div>
  <main>
    <center>
      <p class="entry-content" id="content-a">helloo</p>
      <p class="entry-content" id="content-b">hiiii</p>
    </center>
  </main>
</div>